본문 바로가기

HTML,CSS

 (19)
세로 가운데 정렬 한 번에 세로로 가운데 정렬을 하는 방법은 없다. 그래서 몇 가지의 방법들을 섞어서 사용해야 한다. vertical-align: 은 inline 또는 table-cell box에서의 수직 정렬을 지정한다. html 코드 subsub css 코드 .gray { width: 300px; height: 400px; background-color: gray; text-align: center; } .nice { display: inline-block; height: 100%; vertical-align: middle; } .yellow { background-color: yellow; display: inline-block; vertical-align: middle; } 이런 방법으로 새로운요소 .nice를 만..
리스트 리스트 (Ordered List) : 순서가 있는 리스트 (List item) (Undered List) : 순서가 없는 리스트 라면 치킨 피자 .. 로하면 번호가 A,B,C로 매겨진다. 이외에서 "a"로 하면 소문자로 번호가 매겨지고, type을 "i"로 쓰면 로마숫자 소문자로 매겨진다 태그는 기본적으로 왼쪽에 40px의 padding이 있다. ul { padding-left: 0; } 을 하게 되면 왼쪽의 패딩을 없애버릴 수 있다.
display 모든 요소는 딱 한 개의 display 값을 갖고 있다. display 종류 1.inline 2. block 3. inline-block 4. flex 5. list-item 6.none inline display inline 요소들은 다른요소들과 같은 줄에 머무르려고 하는 성형과, 필요한 만큼의 가로 길이만 차지하는 성향이 있다. inline 요소 종류 , , , , , block display block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있다. block 요소 종류 , ~, , , , block요소들은 가로길이와 세로 길이를 직접 설정가능하다. 하지만 inlin요소들은 자동으로 설정된다.(inline 요소들은 가로,세로 길이의 개념이 ..
CSS의 다양한 단위들 px 절대적인 값이다. 다른 요소의 값에 영향 받지 않는다. rem 상대적인 값이다. 하지막 오직 태그의 font-size에만 영향을 받았습니다. ex) 8rem 은 태그의 font-size의 8배 크기이다. em 상대적인 갑이다. em은 자기 자신의font-size를 기준으로 합니다. 2em은 자기 자신의 font-size의 2배 크기입니다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속 받은 값을 기준으로 합니다. 만약 자기 자신에게 정해진 font-size가 있다면 그 값을 기준으로 em이 결정됩니다. %(퍼센트) % 역시 상대적인 값이다. %는 어느 항목에서 쓰이냐에 따라 다른 기준이 적용됩니다. 예를 들어 font-size에서 %가 쓰일 경우, 상위 요소의 fon..
세번째 웹페이지 - 코딩의 민족 전체화면 HTML 파일 충섭 코딩의 민족 넌 코딩할 때가 제일 예뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각 한 착한가격 바로 결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각 한 착한가격 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각 한 착한가격 바로 결제 코가네 주머니가 가벼운 당신의 마음까지 생각 한 착한가격 바로 결제 CSS파일 @font-face{ src: url("fonts/BMJUA_ttf.ttf"); font-family: "Jua"; } *{ box-sizing: border-box; } body{ background-color: #F0E8D9; } #head1 { font-size: 64px; margin-top: 75px; margin-bottom:30px;..
배경 이미지 배경 이미지 넣는 방법 background-image: url("이미지 주소");를 사용해주면 됩니다. 하지만 위 코드만 사용하게 되면 이미지가 반복될 뿐만 아니라, 화면에 알맞게 적용이 되지 않습니다. 이것을 해결하기 위해 몇 가지 속성 코드들이 있습니다. background-repeat background-repeat는 이미지를 반복시킬 것인지 아닐 것인지, 그리고 반복시킨다면 어떤 방식으로 반복시킬 것인지 정해주는 속성입니다. background-repeat: no-repeat; : 반복하지 않음 background-repeat: repeat-x; : 가로 방향으로만 반복 background-repeat: repeat-y; : 세로 방향으로만 반복 background-repeat: repeat; :..
box-sizing 가로길이는 300px, 세로 길이는 200px, 패딩 35p, border(빨간색 테두리): 5px로 설정되어있다. 처음 내가 원한 총 가로, 세로 길이는 300, 200px인데 지금 요소를 검사해보는 총 가로길이는 5 +35 +300 +35 + 5 인 380이고 총 세로 길이는 5 +35 +200 +35 +5인 280이 된다. 이것을 해결하기 위해 widtd(가로길이), height(세로 길이)에서 각 80을 빼주면 되지만 이 방법은 너무 귀찮다. 그래서 있는 코드가 box-sizing: border-box;이다. 해결책: box-sizing box-sizing 속성을 border-box 값으로 설정해주면 width와 height는 테두리와 패딩과 내용물을 모두 포함한 길이가 됩니다. 따로 설정해주지 ..
박스 꾸미는 몇가지 방법 border-radius: 50px; 요소의 모소리를 둥글 만들 수 있습니다. 더 큰 값을 입력하면 더 둥글게 된다. 개별 설정 각 모서리를 개별 설정할 수도 있습니다. 배경색 background-color 이 속성을 이용하면 배경색을 설정할 수 있습니다. 폰트 색을 설정할 때처럼 색 이름, RGB 코드, HEX 코드 중 하나를 입력하면 됩니다. 페이지 변경색 페이지 전체의 배경색을 설정하고 싶으면 body 태그에 background-color 속성을 입혀주면 됩니다. -->배경색을 투명하게 두고 싶으면 transparent 값으로 설정해주면 되는데, 따로 설정을 해주지 않으면 transparent가 기본값으로 설정됩니다! box-shadow 이 코드는 그림자를 입혀주는 속성입니다. 기본값은 none이고..

티스토리툴바