본문 바로가기

CSS29

[부스트코스] 6-1 CSS 폰트, 텍스트 6. 폰트, 텍스트 1) 속성-typography em: 폰트 전체 높이 ex(=x-height): 해당 폰트의 영문 소문자 x의 높이 Baseline: 소문자 x를 기준으로 하단의 라인을 의미 Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미 (g, j, p, q, y) Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역 (b, d, h, l) 2) 속성-font-family (글꼴) font-family: family-name|generic-family|initial|ingerit; /* 맨 마지막 선언은 generic-family */ font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif; fami.. 2022. 3. 19.
[부스트코스] 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.
[JS] 웹과 JavaScript 1. 수업소개 2. 수업의 목적 Javascript의 역할 자바스크립트의 가장 중요한 역할은 사용자와 상호작용할 수 있게 하는 것 3. HTML과 JS의 만남 : script 태그 JavaSciprt는 HTML 위에서 동작하는 언어 script 태그 안에는 Javascript 코드를 쓸 수 있음 JavaScript html hello world 다른 게 없어 보이지만, 다르다. JavaScript html 1+1 자바스크립트는 동적이다. 4. HTML과 JS의 만남 : 이벤트 (event) hi 버튼을 클릭했을 때, 경고창이 뜬다. onclick에는 자바스크립트 언어가 와야 한다. https://www.w3schools.com/js/js_events.asp 5. HTML과 JS의 만남 : 콘솔 크롬 오른.. 2022. 3. 15.
[부스트코스] 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.

티스토리툴바