네발로 코딩하는 포메라니안

- element의 위치를 지정 1. width, height 속성 - block의 너비와 높이 크기를 설정 - block element만 적용됨 (=inline element는 적용X) - default값 width = 자신의 상위 block에서 허용하는 내부 width 크기만큼 100% 채움 height = 0%, block속의 내용물의 크기 2-1. position 속성 - 위치 옮기기 위한 기준점 잡기 속성 값 의미 static default값으로 일반적인 내용물의 흐름, 기준이 없으므로 배치 불가능 relative 일반적인 내용물의 흐름, 자기 자신을 기준으로 배치 absolute 상위 element를 기준으로 절대적인 위치 지정 fixed 사용자가 보는 뷰를 기준으로 배치 (항상 화면상의 지정..

1. 개요 1. 테이블 속성 속성 의미 table-layout table layout설정 width table 너비 지정 height table 높이 지정 text-align Cell 내부 내용을 수평 정렬 vertical-align Cell 내부 내용을 수직 정렬 2. 테두리 속성 속성 의미 border-collapse 테두리 분리/통합 설정 border-style 테두리 스타일 설정 border-width 상하좌우 4개의 테두리 너비 설정 border-color 테두리 색상 설정 border 테두리 관련 속성을 한번에 지정하는 단축형 속성 2. table-layout - {table-layout: auto(default값) | fixed;} - fixed = table cell의 width, heig..

1. 개요 - 화면에 출력될 element들에 디자인 요소를 추가하는 속성들 속성 의미 속성 의미 cursor 마우스 모양을 변경 background-image 배경을 이미지로 지정 classification 리스트의 글머리 기호를 변경 background-attachment 배경 이미지를 고정하거나 scroll여부를 지정 display element가 화면에 출력되는 방식을 조정 background-repeat 배경 그림의 반복 여부 지정 background-color 배경색 지정 background-position 배경 그림의 위치를 지정 background 배경 관련 속성 한번에 지정 2. display - {display : none | block | inline | ... } 3. backgro..

1. 개요 - 글자, 공간, 단어, 문단들이 보여지는 속성을 정의 속성 의미 속성 의미 text-align text 정렬 방식 vertical-align 수직 정렬 지정 text-decoration text 장식 지정 letter-spacing 문자 간의 space 간격 조절 text-indent text-block 첫 라인 들여쓰기 지정 word-spacing 단어 간의 간격 지정 text-transform text 대문자로 line-height 줄(행) 간격 지정 white-space element 안의 공백 지정 color text 색상 지정 2. text-align - 속성값 속성값 의미 left 왼쪽 정렬 right 오른쪽 정렬 center 중앙 정렬 justify 각 라인의 너비가 모두 동일하..

1. 개요 - text의 글꼴, 굵기, 크기, 스타일 등을 지정 속성 의미 font-family 글꼴 지정 font-size 글자 크기 지정 (px, cm, % 등) font-style 글자 스타일 지정 font-variant 소문자를 작은 대문자로 변경 font-weight 글자 굵기 지정 font font에 관련된 속성을 한번에 지정할 수 있는 단축형 속성 2. font-family - font명에 white-space가 있으면, " "로 감싼다. text *추천 사이트 1. 눈누 : 상업용 폰트 제공 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 3. font-style - 속성 값 normal = 기본 italic = 이탤릭체로 oblique = 기울임꼴로 4..

1. 선택자란? - css 적용 타겟을 지정할 때 사용 종류 선택자 설명 사용법 일반 선택자 전체 선택자 HTML내의 모든 element를 선택 * { } 타입 선택자 태그명이 일치하는 element(태그)를 선택 h1, h2 { } 클래스 선택자 class 속성 값이 일치하는 element를 선택 .className { } ID 선택자 id 속성 값이 일치하는 element를 선택 #idName { } 복합 선택자 하위 선택자 하위 element(자손들)를 선택 E1 E2 { } 자식 선택자 직속 하위 element(자식들)를 선택 E1 > E2 { } 인접 형제 선택자 인접 형제 sibling관계인 element를 선택 E1 + E2 { } 일반 형제 선택자 sibling관계인 element들을 선택..

1. CSS란? - Cascading Style Sheets의 약자 - 마지막에 작성한 규칙, 구체적인 규칙 (p보다는 p #idName)이 우선 적용 - 구성 선택자 { 속성: 값; 속성: 값; } 2. 스타일 시트 적용 1. 외부 스타일 시트 적용 (권장) - html문서의 2. 내부 스타일 시트 적용 - html문서의 3. 인라인 스타일 적용 - 외부 or 내부 시트보다 우선 적용 test 3. 박스 모델 1. 속성 값의 개수에 따른 적용 - 값이 1개 일 때 = 모든 면에 적용 - 값이 2개일 때 = {(top & bottom), (right & left)}에 적용 - 값이 3개일 때 = {top, (left & right), bottom}에 적용 - 값이 4개 일 때 = {top, right, ..

1. CSS 기초 문법 선택자(Selector) : 스타일을 적용하고자 하는 HTML 요소 2. HTML에 CSS를 적용하기 [방법1] .css 파일을 만든 후, html에 적용 css파일에 코드를 작성하고 아래의 코드를 html파일 head태그 안에 붙여준다. [방법2] html에 css코드를 작성 html파일에 head태그 안에 아래와 같이 작성한다. [방법3] 태그 속성으로 지정 태그마다 속성으로 따로 스타일을 지정해준다. html과 css가 잘 구별되지 않기 때문에 추천하지 않는다. hello 3. 선택자 1. 선택자 특징 여러 선택자는 ,를 이용하여 한번에 사용 가능 h1, p{ color : blue; } 2. 종류 1) 태그 p{ color: blue; } 2) 아이디 = HTML 문서 내에..