pseudo class (:pseudo-class)  특정 상태의 요소를 선택할 때 사용한다. 요소 자체는 변하지 않지만, 조건에 따라 스타일을 적용한다. 사용 예:hover사용자가 마우스를 올렸을 때:nth-child(n)특정 위치의 자식을 선택:focus요소가 포커스를 받을 때 a:hover { color: red;}링크에 마우스를 올렸을 때 텍스트 색이 빨간색으로 바뀐다. pseudo element (::pseudo-element) HTML 요소의 특정 부분을 선택하거나 가상의 요소를 만들어 스타일링할 때 사용한다. 실제 DOM 요소에 영향을 주지 않고 특정 부분만 스타일 적용한다. 사용 예::before요소의 시작 부분에 가상의 콘텐츠 추가::after요소의 끝부분에 가상의 콘텐츠 추가::fir..

HTML 요소는 크게 block과 inline으로 나눌 수 있다. block은 컨테이너처럼 쌓을 수 있는 "블록"처럼 말 그대로 높이가 존재하고 옆으로 이어붙일 수 없는 태그를 칭하고, inline은 문자나 글처럼 높이가 없고 한 줄로 이어진 태그를 칭한다. 이렇게 딱 나뉘어있기에 레이아웃을 짤 때 구분이 쉬운 장점이 있지만, 여러 요소들을 상위 요소로 감싸서 배치하는 등 "세부적"인 구성한다면, 한 줄로 이어붙여야하는 것과 그렇지 않은 것을 섞어야 하는 경우가 생긴다. 그래서 나온 것이 inline-block이다. 이름처럼 높이 속성을 그대로 유지하면서 한 줄에 연달아 배치할 수 있기 때문에, 여러 요소들을 품은 상위 컨테이너들의 한 줄 배치 등으로 널리 쓰인다. 하지만 inline-block 역시 한..

.oneParent { text-align: center; } container, body 등 부모요소가 class="oneParent" 속성을 가지면, 하위 태그들을 가운데 정렬시킴 단, 하위 태그들은 width 속성이 없는 h, a, p, 등 .itsChild { margin: auto; } 위의 text-align: center;를 적용해도 안먹는 하위 태그들이 있다. 이는 하위 태그가 display: block이면서 그 width 속성을 건드린 경우에 해당한다(ex. h1 태그에 width: 10%; 적용) 이럴 때는 하위 태그에 margin을 0 또는 auto로 적용하면 된다.

.something { position: static; } 브라우저 상 기본 세팅되어 있는 값으로, 쓸 필요 없는 값. .something { position: relative; left: 100px; } 위의 static(기본) 상태였다면 존재했어야 할 위치 기준으로 좌표값을 계산하여 이동시킴(top/bottom/left/right) 해당 태그의 부모에도 relative가 할당되어있어야 하며, 그렇지 않을 경우에는 body 기준으로 움직임. 여기서는 왼쪽으로부터 100px만큼 더 떨어뜨림으로써 margin-left: 100px와 동일한 효과를 준다. 만약 이동하면서 다른 구성요소와 겹친다 해도 그걸 밀어내지 않고 그 위로 가려버림. .something { position: absolute; left: ..

Inline Block Inline-Block None 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 이 속성을 가진 태그들마다 줄바꿈을 적용한다. 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 해당 태그를 안보이게 한다. width 속성 무의미 width 속성 적용 가능 width 속성 적용 가능 JavaScript를 사용하여 사용자 반응에 맞춰 나중에는 보이게 하도록 응용 가능 .something { display: inline; } display: none; visibility: hidden; 해당 태그는 흔적도 없이 사라짐 해당 태그가 투명할 뿐

CSS 적용에는 3가지 방법이 있다. 1. inline 2. internal 3. external inline은 html 태그안에 style=""속성을 부여하는 것으로 가장 우선순위가 높고 그 태그만을 공략한다는 특징이 있지만, 그래서 다른 태그가 반복될 때는 일일이 복붙을 해야 하는 단점이 있다. internal은 위 inline의 단점을 극복하였다. 적용할 스타일을 html 태그에서 종합세트로 준비해놓는다. 하지만 internal은 그 스타일이 해당 .html파일에만 적용된다는 단점이 있다. external은 위 internal의 단점을 극복하였다. 적용할 스타일을 별도의 .css 파일에 묶어서 관리하고, 그것들을 사용할 html파일에서는 태그 안에 를 건다. link의 href 경로를 설정할 때, ..