코맹탈출하기 코맹탈출하기

width: 요소의 가로너비를 지정, 기본값 auto height: 요소의 세로 너비를 지정, 기본값 auto 0쓸때는 단위 안써도 됌 div(블럭요소-layout) { width: auto; /* 100% */ height: auto; /* 0 */ } span(인라인- text){ width: auto; /* 0 */ height: auto; /* 0 */ 인라인 요소 가로 세로 설정X max-width: 요소의 최대 가로 너비를 지정, 기본값: none min-width: 요소의 최소 가로 너비를 지정, 기본값: 0 max-height: 요소의 최대 세로 너비를 지정 min-height: 요소의 최소 세로 너비를 지정 margin: 요소의 '외부(바깥) 여백'을 지정 음수값도 사용 가능 기본값:0 ..

선택자 { 속성: 속성값; 속성: 속성값; } 선택자(selector): 속성과 값을 지정할 대상을 검색 /* comment */ : 문서 내 수정사항이나 설명 등을 작성(주석) 선언방식 인라인 - HTML요소(태그)의 'style' 속성에 직접 작성하는 방식, 석택자 필요 없음 내장방식(embedded) - HTML 안에 작성하는 방식 링크(link)방식 - HTML 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식 (추천 방식) @import 방식 - @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식 @import url("./common2.css")(css가 css불러오는 방식) 직렬 방식으로 적용되어 시간 소요 가능성 복합선택자 일치선택자(E와 F를 동시에 만족하는 요소 선..

div { font-size: 20px; color: red; } /* 다음과 같이 이해할 수 있습니다. */ 선택자 { 속성: 값; 속성: 값; } 선택자 HTML에 스타일을 적용하기 위해 HTML의 특정 요소를 택하는 sign이다. 속성(Properties)과 값(value) 속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용 CSS 선언방식 inline(인라인) : 태그에 직접 작성 태그에 직접 작성1 선택자 필요 없음 embeded(내장): HTML에 포함하기, head 안에 HTML의 HTML외부에서 불러오기 HTML에 외부에서 불러오기1 선택자 태그로 찾기 선택자를 입력하는 부분에 적용하려는 태그의 이름을 입력 클래스로 찾기 .은 클래스를 나타내며 CSS의 ...

미디어쿼리 : 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것 @media mediaqueries { /* style rules */ } 쿼리문이 참일 경우만 적용 미디어 타입 all, braille, embossed, handheld, print, projection, screen, speech, tty, tv 현실적으로 고려할 것은 screen 많이 쓰임 미디어 특성 width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid width는 뷰포트의 너비, 즉 브라우저..

display 속성 : 요소의 렌더링 박스 유형을 결정 display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ visibility 속성 : 요소의 화면 표시 여부 결정 visibility: visible | hidden | collapse | initial | inherit; collapse : 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) Float 속성 : 요소를 보통의 흐름에 벗어나 띄어지게 함 주변 텍스트나 인라인요소가 주위를 감싸는 특징 display값을 block으로 변경함 float: none |..

font-family: family-name | generic-family ( | initial | inherit ); generic-family는 family-name으로 지정한 폰트가 없을시 적절한 폰트를 선택할 수 있도록 해서 중요함 generic-family는 항상 세트로 설정 family-name은 여러개 선언 가능, generic-family는 마지막에 선언, family-name에 공백이 있으면 따옴표로 묶어서 선언, 자식요소에서 font-family 재선언시 generic-family도 다시 선언해주어야 한다. line-height: normal | number | length | initial | inherit; line-height는 숫자만 입력가능 line-height로 제어되는 부분..

Color 속성 컬러키워드 16진법(0-9, A-F) ex) #ff0000 RGB() 0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색 Content 영역 (요소의 실제 내용을 포함, 크기는 내용의 너비 및 높이). Border 영역(content 영역을 감싸는 테두리 선을 border). Padding 영역(content 영역과 테두리 사이의 여백을 padding) Margin 영역 (border 바깥쪽의 영역을 margin, 다른 요소와 구별하기 위해). px(해상도에 따라 상대적, 화면에서 고정된 크기, 디자인 의도 가 많이 반영된 웹사이트에서 많이 사용) 상대길이 : 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다...

CSS : HTML을 꾸며주는 표현형언어 주석 : /*내용*/ 적용방식 (인라인) 태그 안에 직접 style="" (internal) head 태그안에 style 태그 삽입 요소 선택자: 태그이름에 들어가고 해당 선택자에 모든 요소 적용 CSS(Cascading Style Sheets) CSS 구문("h1{color:yellow; font-size:2em;}" 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ color: yellow; font-size:2em; }" 규칙(rule set) - "h1..