본문 바로가기

코딩51

[부스트코스] 5-2 CSS 단위, 배경, 박스모델 5. 단위, 배경, 박스모델 6) 속성-border 요소의 테두리 /* 속성 */ border-width: 1px; /* 두께 | thin | medium | thick */ border-style: solid; /* 종류 none | hidden | dotted | dashed | solid | double | groove */ border-color: #000; /* 색상 */ /* 축약형 */ border: 1px solid #000; /* 단축 속성 */ border-left: 6px solid red; /* 보더 왼쪽 */ border-width: 6px; /* 보더 두꼐 */ border-width: 6px 3px; /* 보더 상하, 좌우 두께 */ border-width: 6px 3px 4p.. 2022. 3. 18.
[부스트코스] 5-1 CSS 단위, 배경, 박스모델 5. 단위, 배경, 박스모델 1) 속성-정의와구문 CSS 속성의 정의와 syntax 확인 방법 정의 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악 기본 값 상속 여부 애니메이션 가능 여부 사용 가능한 CSS 버전 문법 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있음 속성 값 해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있음 initial: 초기값, 즉 속성의 기본값으로 정의 (ie 지원x) inherit: 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우) 지원 범위 해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 저번 확인 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있으므로, 현재 프로젝트의.. 2022. 3. 17.
[부스트코스] 4-2 CSS 이해하기 4. CSS 이해하기 7) 가상 선택자 1 가상 클래스(pseudo class) 가상 요소(pseudo element) 가상 클래스 미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스 :pseudo=class { property: value; } 문서 구조와 관련된 가상 클래스 :first-child: 첫 번째 자식 요소 선택 :last-child: 마지막 자식 요소 선택 li:first-child { color: red; } li:last-child { color: blue; } HTML CSS JS 링크 관련된 가상 클래스 :link: 하이퍼링크이면서 아직 방문하지 않은 앵커 :visited: 이미 방문한 하이퍼링크를 의미 a:link { color: blue; } a:visited.. 2022. 3. 16.
[부스트코스] 4-1 CSS 이해하기 4. CSS 이해하기 1) CSS 소개 Cascading Stylle Sheets(CSS) HTML(마크업 언어)을 꾸며주는 언어 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할 reference http://www.csszengarden.com/ 2) CSS 문법과 적용 h1 { color: yellow; font-size: 2em; } 선택자(selector) 속성(property) 값(value) 선언(declaration) 선언부(declaration block) 규칙(rule set) 주석(COMMENT TAGS) /* 내용 */ CSS 적용방식 /* Inline */ 내용 /* Internal */ /* External */ /* @import */ @i.. 2022. 3. 15.
[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록 3. 콘텐츠모델, 시멘틱마크업, 블록 1) 콘텐츠 모델 Metadata Flow Sectioning Heading Phrasing Embedded Interactive METADATA 콘텐츠의 style(표현), script(동작)을 설정하거나, 다른 문서와의 관계 등의 정보를 포함하는 요소 base, link, meta, noscript, script, style, title 에 포함됨 FLOW 문서에 사용되는 대부분의 요소 a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed, field.. 2022. 3. 14.
[부스트코스] 2-2 HTML 태그 2. HTML 태그 8) 테이블 요소 1 표 (TABLE) 데이터 표를 나타내는 태그 표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있음 행(가로 방향) row, 열(세로 방향) column , : 데이터 셀(table-cell) : 행(table-row) : 표 테이블 구조 관련 태그 : 표의 제목 : 제목 행을 그룹 : 바닥 행을 그룹 (이 뒤에 위치해야 함) : 본문 행을 그룹 Monthly Savings Month Savings Sum $180 January $100 February $80 테이블 관련 속성 colspan: 셀을 가로방향으로 병합 rowspan: 셀을 세로방향으로 병합 Monthly Savings Month Savings Sum January $100 February 9) 테이블.. 2022. 3. 13.

티스토리툴바