⚒HTML, CSS 정리한 개인블로그

📍가상클래스 가상요소

가상 클래스

• 클래스가 없음에도 마치 클래스를 만들어 지정해놓은 것처럼 선택자로 선택하고 CSS 디자인을 꾸밈.
• 선택자 : 가상 클래스 {property: value;}
• 예)
  :link{...}
  :hover{...}
  :active{...}
  :visited{...}
  :focus{...}
  :nth-child(n)
  :first-child
  :last-child
  :checked (라디오버튼, 체크박스가 체크시 적용할 스타일 지정)

가상 요소

• 실제로 문서에 없는 요소를 마치 있는 것처럼 가상으로 지정해서 CSS 수정

• 선택자 :: 가상요소 {property:value;}

• 예)
  ::marker {...}
  ::selection{...} (마우스 드래그 --> 일명 형광펜 기능)
  ::first-line{...}
  ::first-letter{...}

  ::befor{content:"";}
  ::after{content:url('이미지경로');}

  ➕ content 지정을 꼭 해줘야지만 됨. 안하면 동작을 하지 않음.
  ➕ content에서는 이미지 사이즈 조절이 불가능
  → 이미지 사이즈 조절을 해주고자 한다면 background-image를 사용해서 조절

---

📍메뉴 가로 정렬 방법

방법1

overflow: auto; float이 적용이 됐을 때 콘텐츠 크기만큼 만들어짐

ul {
        display: inline-block;
        display: table;
        margin-left: auto;
        margin-right: auto;
        padding: 2px 0;
        overflow: auto;
      }
li {
        list-style: none;
        float: left;
        padding: 0 80px;
      }

방법2

display: table;만 줘도 가능

방법3

별도의 가상요소를 만들어서 clear:both 해주는 것을 권장

ul::after {
        content: "";
        display: block;
        clear: both;
      }

      ul {
        display: inline-block;
        display: table;
        margin-left: auto;
        margin-right: auto;
        padding: 2px 0;
        overflow: auto;
      }


      li {
        list-style: none;
        float: left;
        padding: 0 80px;
      } */

📍화면 중앙정렬

부모

position:relative;

자식

position:positive;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

---

📍inline vs block vs inline-block

inline	block	inline-block
width, heihgt 적용❌	width, height 적용⭕	width, height 적용⭕
margin, padding 상하 적용❌ 좌우 적용⭕	margin, padding 적용⭕	margin, padding 적용⭕
줄바꿈❌	줄바꿈⭕	줄바꿈❌

💡 inline 속성을 block으로 변경하고 싶다면 display:block 적용

💡 “position:absolute” “position:fiexed” 를 주면 display:inline-block으로 변환

💡 ::before, ::after (전후문자 선택자)사용하면 inline 속성

---

📍clear:both

앞의 float 속성으로 초기화 시키는 속성

---

📍overflow : hidden

자손 or 후손에 float을 주면 내용이 넘치는 것을 방지하기 위해 overflow:hidden을 사용해줘야함

부모 - overflow : hidden
자식 - float

---

📍visibility:hidden vs display:none

visibility:hidden	display:none
내용❌	내용❌
자리 ⭕	자리 ❌
내용만 안보임 자리 존재	내용, 자리 둘다 없애버림

---

📍box-sizing : border-box

border를 적용하면 border 값이 더해지면서 박스들이 밑으로 밀려나게 됨

→ 해결방법 : 자동으로 border 값까지 고려해 width와 height를 잡아주는 box-sizing : border-box 사용
단, padding값 까지 자동으로 잡아주므로 적절히 사용해야함

📍CSS에 다른 CSS 불러오기

@import  url("./경로");

---

📍Image

▪ 이미지 크키 조정

width나 height 중 하나만 지정해주면 비율에 맞춰서 조절됨

▪ 이미지에 특정 좌표에 링크 넣어야할 때

https://www.image-map.net/ 사이트에서 좌표로 코드 활용

+) 이미지가 없을 때
http://placehold.co/400x400 (원하는 크기로 변경)

---

📍form

▪ <label> </label> & <input />

하나의 세트처럼 같이 사용해주기

▪ radio button 단일 선택

<input type="radio" name="class" /><label for="">회화</label>
<input type="radio" name="class" /><label for="">문법</label>
<input type="radio" name="class" /><label for="">작문</label>

→ name 이름 같게 해주기

▪ checkbox button 주의사항

checkbox button 중복 선택 시 주의사항

• name=""을 다르게 써줘야 backend 영역에서 데이터를 가져오는데 혼란이 생기지 않음