본문 바로가기

CSS10

NN CSS | 6-1. 레이아웃 Flex Flex 1. table (전설 속에 존재) 2. float, inline-block 3. Flex 4. Grid 레이아웃 태그는 위와 같이 발전해 왔습니다. 언젠가는 float, inline-block도 전설 속의 태그가 될 수도 있어요. 그렇다고 Grid만 쓰기에는 Flex만 가능한 기능들이 있기 때문에 우리는 Flex와 Grid를 둘 다 배워야만 합니다. 기본구조 item1 item2 item3 기본구조는 컨테이너 안에 아이템들이 배치되어 있는 구조입니다. 이어서 컨테이너와 아이템에 적용하는 속성들을 알아볼게요. 컨테이너 컨테이너에 적용하는 속성 .container { display: flex; /* display: inline-flex; */ } 메인축 : 아이템이 배치된 방향의 축 교차축 : 메.. 2021. 1. 24.
NN CSS | 9. 미디어 쿼리 미디어 쿼리 반응형 웹사이트를 제작하기 위해 미디어 객체에 따라 다른 스타일을 적용되게 만드는 것 Media Types@media mediaqueries { type } : screen — 화면을 출력하는 디스플레이가 있는 미디어는 다 여기에 속합니다.print — 인쇄시 표현되는 웹 페이지 구성all — screen, print를 포함한 모든 미디어에 표현되는 웹페이지 구성 Media Features미디어 특성 width — 뷰포트의 너비. 브라우저 창의 너비 orientation — 세로모드인지 가로모드인지 구분portrait : 세로모드landscape : 가로모드 미디어 쿼리 구문 syntax[a] : a가 나올 수도 나오지 않을 수도 a | b : a 또는 b 둘 중 하나 선택 a? : a가 0.. 2020. 12. 26.
NN CSS | 6. 레이아웃 렌더링 박스 유형 display none : 요소가 렌더링 되지 않음 inline : inline level 요소처럼 렌더링. 같은 라인안에 표시 block : block level 요소처럼 렌더링. 특정 구역을 차지 inline-block : inline level 요소처럼 렌더링되지만 block level의 성질을 갖습니다. flex : inline-block과 동일한 효과를 가지며 flex-direction을 이용해 정렬 -webkit-box : 크롬, 사파리 -webkit-line-clamp : 블록 컨테이너의 컨텐츠를 지정한 줄 수만큼 제한 -webkit-box-orient : visibility 요소의 화면 표시 여부를 지정 visible : 화면에 표시 hidden : 화면에 표시되지 않지만.. 2020. 12. 25.
NN CSS | 8. 구체성과 상속 구체성 같은 요소를 서로 다른 선택자로 선택할 수 있고 서로 다른 규칙을 갖고 있다면 어떤 규칙이 우선 적용되어야 하는지 정해진 규칙을 '구체성'이라고 한다. 구체성 값선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것 0,0,0,0 0,1,0,0 : 선택자에 있는 모든 id 속성값 0,0,1,0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스 0,0,0,1 : 선택자에 있는 모든 요소, 가상 요소 importantimportant 키워드는 모든 구체성을 무시하고 우선권을 갖습니다. 선언 : 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다. 1p#page {color: red !important;}cs 상속 상속은 자손요소에까지 영향을 미치는 것을 말합니다. 하지만 자손이 부.. 2020. 12. 24.
NN CSS | 7. 조합자와 가상선택자 조합자 문서의 구조. 문맥이나 요소의 구조를 기반으로 선택자를 조합하는 것 상속관계 부모요소 — 부모 요소는 그 요소를 포함하는 상위 요소로 단 하나 뿐 의 부모요소 : , 의 부모요소 : 의 부모요소 : 의 부모요소 : 자식요소 — 부모 요소와 반대로 자식 요소는 여러개일 수 있습니다.형제요소 — , 자손선택자 자손 선택자는 선택자 사이 공백 1 div span {color: red;} cs 자식 선택자는 > (꺽쇠 기호) 삽입 1 div > p {color: red;} cs 인접 형제 선택자 : + 기호 삽입 1 div + p {color: red;} cs 가상선택자 Html 과 CSS는 정적인 언어이기 때문에 동적인 변화에 대처할 수가 없습니다. 자주 쓰이는 여러 패턴들에 대하여 미리 정의해 놓고 .. 2020. 12. 23.
NN CSS | 3. 선택자 요소 선택자 선택자는 복잡하고 다양한 요소들 사이에 내가 원하는 요소만 선택할 수 있게 해줍니다. 요소 선택자는 가장 기본이 되는 선택자 1h1 {color: red;}cs 그룹화쉼표를 통해 그룹화 가능합니다. 1 h1, h2, h3, h4, h5, h6 {color: red;}cs 전체선택자 : *(별표) 기호로 모든 요소 선택 1* {color: red;}cs Class 선택자 요소에 구애받지 않고 스타일 규칙을 적용 글로벌 속성이 class 속성 값을 넣고 class 선택자를 이용해 해당 요소에 스타일 규칙 적용 class 선택자는 맨 앞에 .(마침표) 추가 12.foo (font-size: 20px; } ... cs 다중클래스공백을 넣어 여러 개의 class값을 넣을 수 있다 123.foo (fo.. 2020. 12. 20.
NN CSS | 4. 폰트 텍스트 관련 폰트 관련 font-familyfamily-name : 사용할 폰트의 이름generic-family : family-name으로 지정된 글꼴이 없을 경우 대체 폰트 font-size글꼴의 크기를 지정keyword : medium 기본값absolute sizerelative sizelength : px, em 등 고정수치initial :inherit : font-weight글꼴의 스타일normal : italic : 이태릭체oblique : 이태릭체보다 더 기울어진 각도lighter :number : font-style글글꼴의 형태를 변형하는 속성normal : small-caps : 소문자를 작은 대문자로 변형 font-variant글꼴의 굵기normal : 기본값 400bold : 굵게 700bolde.. 2020. 12. 16.
NN CSS | 2. 구문과 적용 방법 CSS 구문 CSS는 html 을 꾸며주는 표현용 언어입니다. 관리적인 차원에서 css의 필요성을 살펴 보겠습니다. h1 제목을 파란색으로 바꿔야 하는 경우가 생겼고 html문서가 많고 h1 태그가 많으면 하나하나 다 고치는데 많은 시간과 노력이 필요합니다. 이러한 디자인적인 부분을 css에 담아 관리 수정이 용이해집니다. css에서 h1을 찾아 한 줄만 추가한다며 모든 html의 모든 h1태그가 똑같아지기 때문이죠. css의 구조를 살펴보겠습니다.1234h1 { color: blue; font-size: 2em;}cs - 선택자 (selector) : h1 - 내용 (property) : color - 값 (value) : blue - 선언 12color: blue;font-size: 2em;cs - .. 2020. 12. 14.
NN CSS | 1. 기초 CSS 란 웹 문서의 전반적인 스타일을 미리 정해둔 스타일 시트를 말합니다. html로만 작성한다고 하면 예를 들어제목 색깔을 수정하고 싶은 경우 그 동안 작성한 모든 글의 제목 색을 다 바꿔 줘야만 합니다. 시간이 많이들겠죠? 만약 CSS로 제목 스타일을 정해놓고 썼다면 한 번만 바꿔주면 전체적으로 적용이 됩니다. 이런 이유에서 CSS를 써야만 합니다. CSS 선언 1span { color : red ; }cs CSS는 위와 같은 형태로 보통 이루어져 있습니다.span : selector(선택자)color : property(속성)red : value(값) CSS 적용방법 1. 인라인 스타일 (Inline) 스타일 시트를 사용하지 않고 HTML태그 내의 속성을 이용 CSS 적용. 가장 먼저 적용됩니다... 2020. 11. 23.

티스토리툴바