WEB/CSS (3) 썸네일형 리스트형 [CSS] 레이아웃 🌈 CSS 기초이론 ✔ padding은 안쪽 여백 / border는 테두리 / margin은 바깥 쪽 여백이다. padding ✔ padding: (top, bottom),(right, left) 순으로 적는다. ✔ padding: 20px 0px; 이렇게 하면 (위 아래) 20px (양옆)은 0px 이렇게 된다. border ✔ border-width, border-style 이렇게 타이핑 하기 보다는 ✔ border: 2px solid red; ✔ 반응형 웹사이트를 만들때는 px보다는 flex grid, flex box, %, vw, vh를 쓰는 것이 좋다 🌈 100% vs 100vh %의 뜻은 그 class에 들어있는 부모의 높이의 100%를 채우겠다는 말이다. 반면, 100vh는 body나 부모와.. [CSS] 기본 셀렉터 🌈 기본 셀렉터의 종류 - CSS 에서 실렉터를 작성하는 방법은 기본적으로 HTML의 태그이름 , 클래스 속성 , id속성에 대한 명시가 있다. 종류 표현방법 태그이름 selector { ...CSS본문..} 특정 태그를 가리킨다. HTML내에 동일 태그가 존재할 경우 모든 태그 요소를 일괄처리한다. 클래스 selector { ...CSS본문..} 셀렉터 이름 앞에 점(.) 을 붙여 표시하고 HTML태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다. 태그의 종류를 가리지 않고 여러 요소에 복수지정이 가능하다. (재 사용 목적) 이 경우 selector의 이름은 자유롭게 지정한다. id selector { ...CSS본문..} 셀렉터 이름 앞에 (#) 을 붙여 표시하고 HTML태그의 id 속성.. [CSS] CSS 시작하기 🌈 CSS = Cascading Style Sheets - HTML 태그에 옷 (= 디자인)을 입혀주는 기법 - 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다. 🌈 HTML 문서에 CSS를 적용하는 방법 태그를 사용하기 - CSS는 HTML 문서 내의 어느 위치에 올 수 있지만, 일반적으로 🌈 CSS의 기본 형식 selector { 속성1: 값; 속성2:값 ... } - selector 는 {..} 범위 안에 기술된 CSS 구문이 적용될 대상을 의미한다. - 속성이름은 실제 처리할 그래픽적인 속성으로 폰트 , 문단 , 크기 , 위치 , 색상 등을 지정하며 값은 해당 속성에 적용할 내용이다. 이러한 구조를 HTML 페이지의 특정 부분이나 여러 개의 요소를 selector로 지.. 이전 1 다음
