본문 바로가기

프론트엔드 개발/HTML, CSS - 이론

[CSS] 박스모델 1 1. inline이 아닌 요소 (block, in-line block)의 크기에 적용할 수 있는 것 (1) 너비, 높이 ㄱ. 절대적인 수치 이용 (px) ㄴ. 부모 요소의 크기에 대한 상대적인 요소 이용(em, %) ㄷ. 윈도우 창 전체 크기에 대한 상대적인 요소(이를 뷰포트라고 함) 이용 (Xvw- 윈도우 창 너비의 X%, Xvh - 윈도우 창 높이에 대한 X%) ㄹ. 윈도우 창 너비와 높이 중 큰 것/ 작은 것에대한 상대적인 요소 (Xvmax - 둘 중 큰 것의 X%, Xvmin - 둘 중 작은 것에 대한 X%) ㅁ. max-width, min-width / max-height, min-height 설정해두면 block이나 inline-block이 해당 너비나 높이 이상으로 커지거나 작아지지 않음. .. 더보기
[HTML] Block 요소와 In-line 요소 1. in-line, block, inline-block 요소 특징 (1) in-line과 block의 차이 Block은 딱딱한 상자와 같다. 상자처럼 공간을 독차지하고 높이,너비, 안팤의 여백의 효과 다 적용됨. in-line은 랩으로 물건을 씌운 것과 같다. 껍데기가 없기 때문에 다른 컨텐츠들과 어우러진다. (2) block과 in-line block 의 차이 in-line block은 컨텐츠 크기 만큼의 커스터마이징된 박스이다. block이 하나의 가로 공간 전체를 독차지 하는 것과 달리, in-line block은 택배회사 공장 라인에 박스를 나란히 늘여뜨려 놓듯이 가로 공간을 공유 해서 쓸 수 있다. (3) 표 in-line block inline-block 기본 너비 컨텐츠 크기에 맞춤 부모의.. 더보기
[CSS] 색 표현하기 1.색 표현의 원리 (1) 색 이름으로 표현 p { /* 글자색 */ color: yellow; /* 배경색 */ background-color: black; } (2) RGB(A)로 표현 *형태 rgb(빨강,초록,파랑) rgba(빨강,초록,파랑,불투명도) * 각각 0~255이고, 전부 255 하면 흰색, 전부 0하면 검정색 (%로 쓸 수도 있다.) 불투명도는 값이 낮을수록 투명, 높을수록 불투명. *rgb()만 하고 인풋 4개 넣어서 불투명도 표현도 가능하다. p { /* 글자색 */ color: rgba(100,50,20%,50%); /* 배경색 */ background-color: rgb(200, 150, 300); } (3)HEX로 표현 RGB랑 똑같은데, 위의 10진수를 16진수로 표현한 것 #.. 더보기
[CSS] 문단과 목록 스타일 만들기 1. 정렬과 간격(자간, 스페이스 크기, 줄 높이) p { /* left, center, right, justify */ text-align: left; letter-spacing: 0; word-spacing: 0; line-height: 1.5em; /* justify는 채워 쓰기 (글의 양쪽 끝을 맞춘다.) 스페이스바 간격은 em이나 %등 상대적인 걸로 하는 것이 좋다 왜냐하면, 간격을 상대적 크기로 해야 폰트나 글자 크기에 맞게 간격이 띄워지기 때문이다. 들여쓰기도 마찬가지 */ } 2. 들여쓰기 p { text-indent: 0.8em; } /* 들여쓰기도 마찬가지로 얼마나 들여쓰는 지를 글자 폰트 자체의 띄어쓰기 비율에 맞추는 것이 좋기 때문에, em이나 %같은 상대적 비율로 쓰느 것이 좋다... 더보기
[HTML] 글자 텍스트와 스타일 1. CSS 기본 문법 선택자 { 속성1: 값; 속성2: 값; /* ... */ } 2. 폰트 스타일(기울이기) + 폰트 굵기 p { /* normal, italic, oblique */ font-style: normal; /* normal, bold, 100~900 */ font-weight: normal; } /*p 태그에 대해서 해당 폰트 기울기, 굵기가 적용된다.*/ 3. 요소마다 글자 크기 키우기 (일괄 키우기, 상대 비율로 키우기(복리 o,x)) (1) 일괄 커짐 (px : 픽셀) 선택자 { font-size: ~~px; } /*해당 선택자 영역 내의 모든 글자는 ~~px만큼 크기가 커짐.*/ (2) 갈수록 비율 만큼 커짐 (100%, 1em) 선택자 { font-size: ##; } 선택자 .. 더보기
[HTML] CSS 적용 방법과 선택자들 1.CSS 적용방법 (1)인라인 스타일 (inline style) 태그 안에 css 구문을 적어넣는 스타일 > 재사용이 불가하고, HTML과 CSS가 분리되지 않기에 비추 (2) 내부 스타일 시트 (internal style sheet) HTML 페이지 내부 Head 태그 안에 style 태그를 두고 그 안에 CSS 코드 작성하는 방식 > 재사용이 가능하나, CSS 코드가 많아질수록, HTML 작성하기가 복잡해짐. (3) 링킹 스타일 시트 (linking style sheet) 외부 CSS 파일과 HTML 문서를 연결하는 것 CSS와 HTML이 분리 되어서 가독성 좋고, 하나의 CSS 파일을 여러 HTML 문서에서 참조할 수 있으므로 편함. 2. 선택자들 (0). 특징 * 똑같은 선택자에 관한 것일 경우.. 더보기
[HTML] 기타 활용되는 태그 1. pre 태그 (1) 코드 pre 태그 pre 태그에 텍스트를 작성하면 스페이스, 탭, 엔터 등 모든 공백 요소들이 이와 같이 화면에 그대로 적용됩니다. 때문에 pre 태그는 아래의 아스키 아트(Ascii art)들처럼 공백요소들을 적극 활용해야 하는 경우 유용하게 사용될 수 있습니다. ,d888a ,d88888888888ba. ,88"I) d a88']8i a88".8"8) `"8888:88 " _a8' .d8P' PP .d8P'.8 d) "8:88:baad8P' ,d8P' ,ama, .aa, .ama.g ,mmm d8P' 8 .8' 88):888P' ,d88' d8[ "8..a8"88 ,8I"88[ I88' d88 ]IaI" d8[ a88' dP "bm8mP8'(8'.8I 8[ d88' `" .8.. 더보기
[HTML] 사용자로부터 입력 받기 3 1. textarea 태그 textarea 태그 메시지를 입력하세요. 2. 옵션을 사용하는 태그 (1) select,option 태그 옵션들을 사용하는 태그 select, option 태그 언어 -- 언어 선택 -- HTML CSS 자바스크립트 타입스크립트 (2) optgroup 태그 optgroup 태그 쇼핑 목록 사과 포도 오렌지 당근 토마토 가지 소고기 돼지고기 닭고기 (3) datalist 태그 datalist 태그 현재 직업 3. 정도를 표현하는 태그 (1) progress 태그 정도를 표현하는 태그 progress 태그 0% (2) meter 태그 meter 태그 20달러 4. 스스로 해보기 더보기

티스토리툴바