HTML & CSS

html 강의 내용 정리(1) Division VS Spandiv 태그는 한 줄을 차지한다 ? 이것이 무엇을 의미 ?콘솔로 실행시 태그범위가 한줄span태그는 컨텐츠 크기만큼 공간을 차지한다.콘솔로 실행시 태그범위가 범위만 포함css로 실행시 변환시킬수 있다!ex

Achievement GoalsCSS의 사용목적을 이해할 수 있다.프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.CSS의 기본 문법과 구조를 이해할 수 있다.CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.직접 HTML 안에 CSS를 정의하는 것을 권장

(1) 색상 (color)값: HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있습니다.\-> 예시 코드red class의 color 속성에 \-> 글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있

\-> 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 됩니다.(1) 줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)Q)위 HTML에서 줄바꿈이 적용되는 태그는 무

박스를 벗어나는 컨텐츠 처리overflowoverflow: auto; : 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. overflow: hidden; : 콘텐츠의 내용을 보여주고 싶지 않을 때overflow-x / overflow-y :x축과 y축을 지정해 가로

Before You Learn아래 내용은 지난 유닛에서 학습한 내용입니다. 잘 이해하고 있는지 점검하세요. CSS의 기본적인 셀렉터 - 절대 단위와 상대 단위를 구분할 수 있다. CSS 박스 모델에 대해 이해하고 있다. 박스 측정 기준(content-box, bord

셀렉터h1 { }div { }전체 셀렉터\* { }Tag 셀렉터section, h1 { }ID 셀렉터\`class 셀렉터.widget { }.center { }attribute 셀렉터 (암기할 필요는 없습니다)a\[href] { }p\[id="only"] { }p\[c

HTML: index.htmlCSS: index.csscontainer박스의 자식박스: .col .w10 .w20 .w70col박스의 자식박스: .icon .row .h20 .h40 .h80display: flex자식들까지만 되고 후손까지는 안된다 그렇기 때문에, co

Flex는 무엇인가 ? 한마디로 하자면 Flex는 레이아웃 배치전용기능이다. 부모 속성,자식 속성?? Flex의 속성들은, 부모에 적용하는 속성 자식에게 적용하는 적성 이렇게 두가지로 나뉜다. 부모에 적용되는 속성들 display: flex; (선언) 기본값으로,