🎭 HTML CSS/크스스

[CSS] Position과 Display

Position 1. static(default) - 가장 기본 위치 - top, bottom, left, right 등을 사용할 수 없다. - 기본 문서 흐름에서 벗어나지 않는다.2. relative - 기본 위치에 대해서 상대적인 위치(즉, 기본 위치에 대한 '공간'은 차지하고 있음) - static에 해당하는 위치에서 각 방향에 대해 얼만큼 이동할지 설정 - 기본 문서 흐름에서 벗어나지 않는다.3. absolute - 말 그대로 절대적인 위치로, 페이지 레이아웃에 공간을 배정하지도 않는다. - 가장 가까운 위치 지정 부모 요소에 대해 상대적인 위치로 설정 - 단, 부모 요소 중 위치 지정 요소가 없다면(static만 있다면) 초기 컨테이닝 블록을 기준으로 배치 - 기본 문서 흐름에서 ..

[CSS] Styles : Inline VS Internal VS External

CSS 스타일링 방법 Inline html 내의 element에 바로 스타일 정의하는 방식 html 작업을 하며, 그 때 그 때 element마다 적용하기에 직관적이긴 하지만 너무 지저분해진다. I'm learning to code! Internal html의 head에서 각 element에 대한 style을 정의하는 방식 Inlined에 비해 비교적 깔끔하지만, 여전히 html 내에 있어 다소 지저분하다. External 같은 위치(동일한 폴더 내에) css파일(보통 style.css)을 만들어 html 파일과 연결시키는 방식 html의 head에 link를 사용한다. href는 css파일의 주소(url도 가능하다), rel는 relation의 약자로 html파일과 link된 파일간의 관계를 설명한다...

[CSS] box-sizing : content-box VS border-box

box-sizing 박스의 사이즈에 대한 기준을 잡는 개념! default로 content-box가 되어있다. content-box content를 기준으로 하는 box-sizing 방법 width와 height가 content를 기준으로 하게 된다. content에 대한 너비와 높이를 정하게 되므로 실제 렌더링되는 박스의 크기를 계산하는 게 복잡함(padding, border 두께까지 고려) h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } border-box border를 기준으로 하는 box-sizing 방법 width와 height가 content, padding, border를 합친 것을 기준으로 하게 된다. ..

[CSS] Selector(선택자)

Selector(선택자) /* link된 html내 전체 선택 */ * { } /* 기본적인 tag 선택자 */ h1 { } p { } /* class에 대한 선택자(name__description이라는 클래스를 선택) */ .name__description { } /* id에 대한 선택자(name1이라는 아이디를 선택) */ #name1 { } /* 특정 태그이면서 특정 클래스에 대한 선택자(chaining) */ h1.class__name { } /* 특정 태그의 자식 태그 선택 */ h1 li { } /* pseudo-class(hover의 경우 마우스를 위에 올렸을 때 적용되는 선택자) */ p:hover { } /* 1. anchor 태그의 href값내에 flower가 포함된 경우에 대한 선택자..