HTML, CSS

hyo3·2023년 7월 18일

CSS html 프론트엔드

DX DATA SCHOOL

목록 보기

1/3

개인공부용 학습 정리

💻 HTML

웹 브라우저에 무엇인가를 출력하기 위한 언어

1. HTML 이해하기

1) 구성요소

태그 : < 와 > 로 묶어서 표현
요소 : 내용을 포함한 태그 전체
속성 : 태그에 구체적인 기능 제공, 여러 속성은 공백으로 구분
값 : 속성이 가지는 값, 대입 연산자인 = 과 함께 지정

2) HTML 서식

태그 중첩 : 부모-자식태그 열리고 닫히는 시점이 중요
주석 : 
특수문자 표현 : <, >, &를 <, >, &로 변환하여 사용

3) HTML 기본 구조

DTD(Doctype)
- 브라우저에게 웹페이지 종류 알려주는 선언문
- 문서 최상단에 작성
- 엄격형(Strict), 호환형(Transitional), 프레임형(Frameset)
<html> 요소
- <html>~</html> 태그는 웹 페이지의 시작과 종료를 의미
- lang 속성에 언어 코드 설정 가능
<head> 태그
- 문서의 일반저긴 정보와 title 등의 제목을 선언
<body> 태그
- 본문 부분에 해당
- 웹 브라우저 화면에 나타나는 모든 콘텐츠 선언

4) 전역 속성

HTML의 모든 태그에 사용 가능한 속성
title : 요소의 설명을 지정하는 전역 속성
<태그 title="설명’'></태그>
style : 요소에 직접 css를 적용하게 해주는 속성
<태그 style="값"></태그>
class : 요소들을 그룹화하기 위한 속성
<태그 class="값"></태그>
id : 요소들을 구별하기 위한 속성
<태그 id="값"></태그>
data : 데이터를 저장하는 용도로 사용
<태그 data="값"></태그>

2. HTML 태그

1) 태그 분류

블럭 요소
- 독립적인 형태의 상자
- 다른 요소와 배치될 때 줄 바꿈을 해서 배치
- 대부분의 블록 요소는 인라인 요소와 텍스트를 포함할 수 있음
- <h1>~<h6>, <p>, div, ul, ol, dl, table 등
인라인 요소
- 안에 인라인 요소, 텍스트 포함할 수 있지만 블록 요소를 포함X
- <a>, <img>, span, 강조(em, strong) 등
- <a>는 인라인 레벨 요소지만 자손으로 블록 요소 가질 수 있음

2) 제목과 단락요소

제목 태그
- 제목(heading) 를 줄여서 h로 씀
- 레벨에 따라서 <h1>~<h6>까지 있음
단락 태그
- 단락(paragraph) 를 줄여서 p로 씀
- 텍스트를 문단으로 정의할 때 사용
- 문단 요소 안에는 인라인요소와 텍스트만 포함 가능, 블록요소 불가능
- 문단 안에서 강제로 줄바꿈 <br/>

3) 텍스트를 꾸며주는 요소

물리적인 태그
- <b>bold</b> : 글자 굵게
- <i>italic</i> : 글자 기울임
- <u>underline</u> : 밑줄
- <s>strike</s> : 글자 중간선(취소선)
- <big>, <small>, <tt>, <sup>, <sub> 등
논리적인 태그
- <abbr>약어나 머리글자</abbr>
- <cite>출처</cite>
- <dfn>처음 등장한 단어나 단어의 정의를 별로 구별
- <code>, <var>, <samp>, <kbd> : 프로그램의 코드 요소

4) 앵커 요소

<a>
- a태그, 앵커(anchor), 링크 등 여러 이름으로 불림
  <a href="URL" target="_blank" title="대체설명>~~</a>
href 속성
- 링크를 만들기 위해 반드시 href 속성을 가지고 있어야함
- href 속성의 값은 링크의 목적지가 되는 URL
절대경로와 상대경로, 내부링크
- 절재경로 : 프로토콜, 도메인이름, 경로명까지 포함한 전체 URL
- 상대경로 : 현재URL을 기준으로 한 경로
- 내부링크 : href="#id속성값" 입력하면 페이지 내 이동
target 속성
- _blank : 새로운 창으로 열기
- _self : 자신의 페이지에 문서 열기 (default)
- _top : 현재 페이지 전체에 문서 열기
- _parent : 현재 문서의 상위 페이지에 열기
- 다른 영역의 name이나 id에 입력하면 속성 가진 영역에 문서 열음

5) 의미가 없는 컨테이너요소

태그 자체에 아무 의미가 없으며 단순히 요소를 묶기 위해 사용됨
<div> 태그 : 블록 레벨 태그
<span> 태그 : 인라인 레벨 요소

6) 리스트 요소

ul (unorderlist)
- 순서 없는 목록
- type : disc(기본값), circle, square
- 세부 항목은 <li> 태그를 이용해서 표시
ol (orderlist)
- 순서 있는 목록
- type : 1(기본값), A, a, I, i
- start 속성을 이용하면 시작 숫자를 변경할 수 있음
- 세부 항목은 <li> 태그를 이용해서 표시
dl (description list) - 블록요소
- 용어와 그에 대한 정의를 표현할 때 사용
- <dt> : 용어를 나타내는 태그 - 인라인요소
- <dd> : 용어에 대한 정의 및 설명을 나타내는 태그 - 블록요소

7) 이미지 요소

<img>
- 문서에 이미지 삽입하는 태그, 닫는태그가 없는 빈태그
  <img src="이미지경로" alt="대체텍스트">
src 속성
- <img>의 필수 속성으로 이미지의 경로를 나타냄
- 상대경로와 절대경로 가능
alt 속성
- 이미지의 대체 텍스트를 나타내는 속성
- 웹 접근석 측면에서 중요한 속성임
width/height 속성
- 가로/세로 크기를 나타내는 속성
- 구조(영역)을 만들어놓고 나중에 이미지 불러오기 때문에
- 가로/세로 설정하면 로딩 속도를 줄일 수 있음
usemap속성, <map>, <area>
- 이미지맵은 이미지 특정 영역에 링크를 설정하는 것
- <img usemap="#맵이름"> 설정 하고
- <map name="맵이름"><area></map> 태그로 설정

8) 테이블 요소

<table>
	<tr>
		<th>제목 셀(header cell)</th>
	</tr>
	<tr>
		<td>내용 셀(data cell)</td>
	</tr>
 </table>

테이블(table)은 열(column), 행(row) 그리고 셀(cell)로 구성
<table>은 하나 이상의 <tr>로 이루어져 있으며
<tr>은 셀을 나타내는 <th>, <td>를 자식으로 가짐
셀 병합
- 제목셀(th), 내용셀(td)는 colspan 이나 rowspan을 이용해 셀 병합

9) 폼 요소

사용자로부터 데이터를 받아야 하는 경우 사용되는 폼 요소
<input>
- 닫는 태그 없는 빈요소
- 한 줄 글상자, 라디오버튼, 체크박스 등 폼 컨트롤 생성할 때 사용
- type 속성에 따라 폼의 종류가 결정됨
  - type="text" [placeholder="양식표현"] : 단순 텍스트 입력
  - type="password" : 입력할 때 값을 노출하지 않음
  - type="radio" : 라디오 버튼 (중복 불가능)
  - type="checkbox" : 체크박스 (중복 선택 가능)
  - type="file" : 파일을 서버에 올릴 때 사용
  - type="button" : 아무 기능이 없는 버튼
  - type="submit" : form의 값을 전송하는 버튼
  - type="image" : 이미지 버튼 (submit과 동작 동일)
  - type="reset" : form의 값을 초기화하는 버튼
  - type="hidden" 등
- name 속성으로 그룹화
- checked 속성으로 라디오버튼과 체크박스 초기화
<select></select>
- 선택 목록 상자 또는 콤보박스
- 내부에 <option>각 항목</option> 나타냄
- selected 속성으로 선택된 항목 설정 가능
- multiple 속승으로 다중 선택 설정 가능
<textarea></textarea>
- 여러 줄의 텍스트를 입력할 때 사용
- rows, cols 속성으로 텍스트 상자의 크기 조절
<label></label>
- form요소의 이름과 form요소를 명시적으로 연결시켜줌
- form요소의 id속성값과 <label>의 for 속성값 같게 적기
<fieldset>, <legend>
- form 요소를 구조화 하기 위해 필요한 태그

💻CSS

웹 페이지의 디자인을 꾸며주는 언어(도구)

1. CSS 이해하기

1) 적용방법

Inline
- html 태그 내에 스타일을 사용하는 것
- 코드 재활용 되지 않기 때문에 비추천
- <span style=”color:red”></span>
Internal
- html 문서 내에 <style>을 이용해서 스타일 적용하는 것
- <style> div { color : red; }</style>
External
- 외부 스타일 시트 파일(.css) 을 불러와서 적용하는 것
- <link rel="stylesheet" href="css파일경로">

2) CSS 서식

selector선택자 { 속성1: 값1; 속성2 : 값2; ... }

선택자 : 어떤 개체에 적용할지 선택
속성과 값 : 속성:값 쌍으로 지정, 세미콜론(;)으로 구분
주석 : /*주석*/

3) 선택자(selector)

종류
- * : 모든 선택자
- class선택자 : .class이름 - class속성은 여러 개 가능
- id선택자 : #id이름 - 문서 내 유일한 요소에 사용
- 속성 선택자 : [단순속성 | 부분속성 | 정확속성]
- 문서 구조 관련 선택자
  - 자손선택자 : 공백으로 구분 div sapn
  - 자식선택자 : > 로 구분 div > h1
  - 인접선택자 : +로 구분 div + p

4) 의사 클래스 (가상 클래스)

상황에 따라서 스타일을 정해놓는 것
선택자:가상클래스 로 설정
문서 구조와 관련된 가상 클래스
- :first-child : 첫번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
앵커 요소와 관련된 가상 클래스
- :link : 하이퍼링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
사용자 동작과 관련된 가상 클래스
- :hover : 마우스 커서가 올려진 요소에 적용
- :active : 사용자 입력으로 활성화된 요소에 적용(순간적)
- :focus : 현재 입력 초점을 가진 요소에 적용 (input요소)
UI요소 상태와 관련된 가상 클래스
- :checked : 요소가 선택 상태일 때 적용
- :enabled : 해당 요소 사용가능 할 때 적용
- :disabled : 해당 요소 사용불가능 할 때 적용

5) 상속

요소의 상속은 모든 속성이 다 상속되는 것은 아님
- margin, padding, background, border 등 박스 모델 속성 상속X
상속되지 않은 경우 강제로 상속 가능
- 선택자{ 속성 : inherit;}

6) Cascading (적용 우선 순위..?)

중요도(!important)와 출처
- 중요도 명시적으로 선언된 규칙 우선
- 출처 확인 (제작자 > 사용자 > 사용자 에이전트)
구체성
- 구체성 높은 규칙들이 우선
선언 순서
- 뒤에 선언된 규칙일수록 우선

7) 단위

절대 단위
- 고정된 크기, 다른 요소의 크기에 영향 안받음
- 인쇄물에 주로 이용
- ex) px, pt
상대 단위
- 다른 요소의 크기나 브라우저 크기에 상대적으로 값 변함
- ex) %, em, rem, vw

2. 레이아웃

1) background 관련 속성

background-color : 기본값 transparent
background-repeat : 기본값 repeat
- repeat : x,y축 모두 반복
- repeat-x : x축 반향으로만 반복
- repeat-y :y축 방향으로만 반복
- no-repeat : 이미지 반복X
background-position : 기본값 0% 0%
- % : 기준으로부터 %만큼 떨어진 지점과 이미지의 %지점 일치하는 곳
- px : 기준으로부터 px 떨어진지점과 (0,0)지점 일치하는 곳에 위치
- 키워드 : top,bottom,(y축기준) left,right (x축기준), center
background-attachment : 기본값 scroll 스크롤따른 움직임여부
- scroll : 배경 요소 자체 고정되어 스크롤되지않음
- local : 요소의 내용을 기준으로 고정되어 내용과 함께 스크롤됨
- fixed : 뷰포트 기준으로 고정되어 스크롤에 영향을 받지않음

2) 박스모델 관련 속성

content 영역 : 요소의 실제 내용
border 영역 : content 영역을 감싸는 테두리선
padding 영역 : content와 테두리 사이의 여백, 패딩영역까지 영향줌
margin 영역 : border 바깥쪽 영역, 주변요소와의 여백

border

축약형 border: [-width][-style] [-color];
border-[top,bottom,left,right]-width : 기본값medium 선굵기
- 키워드 : thin, medium, thick
- 단위 : px,em,rem (%사용불가)
border-[top,bottom,left,right]-style : 기본값none 선모양
- none : border 없음
- solid: 실선
- double : 이중실선
- dotted : 점선, 등등

padding

축약형 padding: [-top][-right] [-bottom][-left];

padding: [-top] [-right] [-bottom] [-left];
           0 10px 20px 30px /* 상, 우, 하, 좌 다름 */
           0 10px 20px /* 좌, 우 같음 */
           0 10px /* 상, 하 같음 & 좌, 우 같음 */
           0 /* 상, 우, 하, 좌 모두 같음 */

margin

축약형 margin: [-top][-right] [-bottom][-left];
margin auto : 브라우저에 의해 계산된 값 적용
- margin-left: auto;
- margin-right: auto;
margin 병합 : 상하요소사이 병합 일어남, 큰 값 기준

3) font 관련 속성

font-family: family-name | generic-family ( | initial | inherit );
- font-family 상속되기때문에 기본 대표 폰트 선언 후 필요시 재정의
- family-name : 사용할 폰트 이름. 쉼표로 여러개 선언 가능
- 먼저 선언 우선순위, 이름중간공백, 한글의 경우 홑따옴표''로 선언
- generic-family : 대체 폰트, 맨마지막에 선언, 키워드라 묶지않음
font-size 속성
- 키워드 : medium(기본값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
- length : px, em 등 고정 수치로 지정
- % : 부모 요소의 font-size 기준의 퍼센트로 지정
font-weight
- normal : 기본값 (400)
- bold : 굵게 (700)
- bolder : 부모요소보다 두껍게 (지양)
- lighter : 부모요소보다 얇게 (지양)
- number :100~900
font-style
- normal : 기본값
- italic : italic 스타일
- oblique : oblique 스타일. 각도사용가능 기본값 14도 -90~90도
font-variant
- normal : 기본값
- small-caps : 소문자를 작은 대문자로 변형
font 축약형
- font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;
- font-size, font-family 필수속성

hyo3

다음 포스트

JavaScript 1

1개의 댓글

이태균

2023년 7월 18일

가치 있는 정보 공유해주셔서 감사합니다.

답글 달기