position : absolute 와 position : relative 의 차이점을 이해하는 데 적지 않은 시간을 보낸 적이 있었다. 누군가에게는 도움이 되기를 바라며 그림으로 차이점을 설명해보겠다. 먼저 position 속성을 지정하지 않을 때, position의 기본 동작을 알아야 한다. position: static position을 따로 선언해두지 않으면 기본값으로 적용된다. 기본적으로 흐름의 현재 위치를 기준으로 요소를 배치한다. top, right, bottom, left, z-index는 적용되지 않는다. position: relative 레이아웃을 변경하지 않고 현재 자신의 위치를 기준으로 요소를 배치한다. position: absolute 가장 가까운 위치에 있는 부모 요소 위치를 기..

1순위: !important ( 속성값 바로 뒤에 넣음 / 최상위 명령어임 / 근데 가급적이면 안쓰는게 좋은 듯.) - HTML => 서울 - CSS => .CCC{ color : blue !important; } 2순위: inline 스타일 속성 (태그에 style 먹여서 inline 으로 작성) - HTML => 서울 3순위: 아이디 - HTML => 서울 - CSS => #BB {color : blue} 4순위: 클래스 - HTML => 서울 - CSS => .AAA {color : blue} 5순위: tag 선택자 (tag를 그대로 선택자로 사용하는것. ) - 예를 들어서, span { color : blue } 이런식으로 CSS 파일에 tag 선택자를 선언해놓는 것. 6순위: 전체 선택자 (모든..

매번 VSC에서 html 파일에서 느낌표(!)를 누르고 tab키를 누르면 html 기본 코드가 자동완성 됐다. 항상 당연하게 쓰다가 '근데 이걸 왜 저렇게 써야하고, 왜 필요한걸까?' 라는 궁금증이 생겨 찾아보게 됐다. 이번 글에서는 맨 상단에 위치한 DOCTYPE의 의미는 무엇이며, 왜 써야하는지를 알아보자. HTML 문서의 첫 줄인 HTML(Hypertext Markup Language) 선언이며, 사용 중인 HTML 버전과 웹 페이지 표시 방법을 웹 브라우저에 알려주는 것이다. 웹 브라우저가 HTML 문서를 받으면 DOCTYPE 선언을 확인하여 사용 중인 HTML 버전을 확인한다. HTML 버전마다 규칙과 구문이 다르므로, 버전마다 적용되는 태그와 적용되지 않는 태그가 있다. 따라서, 웹 페이지가 ..