본문 바로가기

IT 개발2

html 기초) html 요소의 시각 근본이라 할수 있는 CSS3 박스모델 각 html 요소 하나하나를 4각형 박스로 보시면 됩니다. 그렇게 보이지 않지만 모든 태그들에 해당됩니다. 그 4각형 박스는 박스크기, 박스여백, 박스테두리 관련, 박스배경색 등이 존재합니다. 좀 더 정확히 말하면, 하나의 태그(요소)는 contents(내용), padding(보더 안쪽 여백), border(테두리), margin(보더 바깥쪽 여백)으로 구성됩니다. css로 꾸미지 않으면 박스모델이 존재한다는 것을 알기 어렵지만 아래와 같이 영역이 존재합니다. 눈에 안 보인다고 없는게 아니죠^^ 모든 요소가 위와 같이 박스로 존재한다고 하니 가슴이 설레이지 않나요? 오랜만에 회사를 가니 이런것도 설렙니다 ㅎㅎ 태그 요소 하나하나마다 원하는대로 테두리도 직선, 점선, 이미지로도 꾸밀수 있고 또한 테두리 색.. 2022. 7. 17.
html 기초) CSS3 에서 원하는 태그(요소)를 선택하여 스타일을 적용할 수 있는 셀렉터 CSS를 사용하거나 자바스크립트 등을 활용하려면 html에서 원하는 요소를 선택할 수 있어야 합니다. 그래서 이번에는 원하는 요소를 선택할 수 있는 "셀렉터"에 대해 알아볼게요. 많이 사용되는 셀렉터는 딱 머리에 기억하고 있어야 일을 하는데에 있어 편하답니다. 머릿속에 다 기억해두면 좋겠지만 내 머리를 믿지 못하니까~ 보면 바로 기억이 날 수 있도록 남겨봅니다. 태그명 셀렉터 : 태그 이름 그대로 쓰면 됩니다. 셀렉터는 아래와 같이 콤마로 구분합니다. h2, li { color:pink; } 클래스 셀렉터 : 앞에 .을 붙이면 됩니다. 동일한 class속성을 사용하는 요소(태그)에 모두 적용됩니다. .main : 이 클래스는 어느 태그에 종속적이지 않으므로 아래 main 클래스가 있는 두 태그에 해당됩니.. 2022. 7. 16.
반응형