바닐라코딩 사전학습/CSS3 CSS 레이아웃 Hello Vanilla Coding aaa bb Block vs Inline block block요소 : 화면상에서 항상 새로운 줄에서 시작, 위 아래에 서로 쌓이는 형식. 기본적으로 사용 가능한 최대치의 폭을 차지함 block요소들은 또 다른 block 요소를 자식으로 가질 수도 있고 Inline 요소를 자식으로 가질 수도 있다. 제약x ex)p, div 태그 inline 요소 : 하나에 이어 또 다른 하나가 줄줄이 이러 붙어서 나타남. 요소 내부 컨텐츠의 양만큼만 폭을 차지함. Inline요소는 또 다른 Inline요소들을 자식으로 포함가능. 그러나!! Block요소를 자식으로 품을 수는 없다. ex)span태그 Positioning flex display: flex; 를 사용하면 다양한 화면에 대.. 2021. 11. 24. CSS 선택자 바닐라코딩 HTML CSS Javascript 함께 열심히 공부해보시죠! 같이 해요 굵은 글씨체 박스박스 이것도 적용 child 이것은 적용 안됨? border CSS는 네모 칸을 만들어줌 child CSS의 > 연산자는 직속 자식 요소들만 적용. 손자는 적용 X li태그는 앞에 점 표시 보통 ul 태그 안에 li 태그를 넣어서 순서없는 리스트를 만든다 서브 헤드라인 h1, h2, #box { font family: Arial, Helevetica, sans-serif; color : red; } li{ color: blue; font-size: 20px; } #first{ color: green; font-size: 50px; } .thick{ font-weight: bold; } #nav li{ ba.. 2021. 11. 24. CSS 기본 문법, 링크 h1{ color: blue; } h1 : '무엇을' 바꾸고싶은지 명령하는 부분 color: -> 지정한 부분을 '어떻게' 바꿀 것인지 명령하는 부분 **HTML에서 h1은 '태그', CSS에서 h1은 '요소'라고 불린다. 용어가 헷갈릴 수 있으니 주의! h1{ color: red; } p, li{ color: blue; font-size: 20px; } h1 요소는 빨간색, p와li 요소는 파란색 20픽셀 크기로. 이렇게 각각 지정이 가능하다. 원하는 요소만 바꾸기 -> id속성 사용 CSS기초 HTML CSS Javascript 열심히 같이 해요 id속성을 이용하면 부분적으로 바꾸기가 가능하다. HTML로 작성하면 HTML은 first id값에 지정되었다. 이를 CSS에서 #first{ color: .. 2021. 11. 19. 이전 1 다음