NakedFlower 님의 블로그

HTML+CSS 본문

궁금해서 해본 거/Web

HTML+CSS

nakedflower 2025. 9. 29. 15:34

HTML(hyper text markup language)

  • 웹에서는 웹에 맞는 형식인 .html(또는 .htm)로 문서를 저장해야 한다.
  • 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시할 수 있어야 한다.
  • 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML

태그

  • 태그는 소문자로 쓴다
  • 여는 태그와 닫는 태그를 정확히 입력한다 (닫는 태그가 없는 태그도 있다)
  • 적당하게 들여쓴다
  • 태그는 속성과 함께 사용된다
    예) <img src="maltese.jpg" width="150" height="160">
  • 인코딩 방식은 utf-8로 한다
    예) <meta charset="utf-8">
  • <!doctype> - 문서 유형을 지정하는 선언문
  • lang이라는 속성을 사용해 문서에서 사용할 언어 지정 가능. 예) <html lang=”ko”>
  • <html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 부분과 실제 화면에 보
    이는 문서 내용을 입력하는 <body> 태그가 포함된다.
  • <title> 태그: 브라우저의 제목 표시줄에 표시되는 내용.
  • <meta> 태그: 문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정
  • <link> 태그: 문서에서 사용할 외부 파일들 링크
    예) <link rel="stylesheet" href="mail.css">
  • 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용한다.

텍스트 관련 태그들

(1) <hn> – 제목 표시하기
(2) <p> – 단락 만들기
(3) <br> – 줄 바꾸기
(4) <hr> – 분위기 전환을 위한 수평 줄 넣기
(5) <blockquote> – 인용문 넣기
(6) <pre> – 입력하는 그대로 화면에 표시하기

(7) <strong> <b> – 굵게 표시하기
(8) <em> <i> – 이탤릭체로 표시하기
(9) <q> – 인용 내용 표시하기
(10) <mark> – 형광펜 효과 내기
(11) <span> – 줄바꿈 없이 영역 묶기
(12) <ruby> – 동아시아 글자 표시하기
(13) <code>: 컴퓨터가 인식할 수 있는 소스를 표시하는 태그
(14) <s>: 문서에서 특정 텍스트를 제거한다는 의미로 취소선을 그리는 태그
(15) <small>: 부가 정보처럼 작게 표시해도되는 텍스트
(16) <u>: 밑줄
(17) <ul> <li> – 순서 없는 목록 만들기
(18) <ol> <li> – 순서 목록 만들기
(19) <dl>, <dt>, <dd> – 설명 목록 만들기

(20) <table>, <tr>, <td>, <th> – 기본적인 표 만들기
(21) <caption> <figcaption> – 표에 제목 붙이기
(22) <thead>, <tbody>, <tfoot> – 표 구조 정의하기
(23) <col>, <colgroup> – 여러 열 묶어 스타일 지정하기

특수문자 사용법

  • 공백(스페이스 한 칸): &nbsp;
  • 부등호(< >): &lt; &gt;
  • 앰퍼샌드(&): &amp;
  • 쌍따옴표("): &quot;

이미지 관련

<img>태그 - 이미지 삽입하기
alt 속성 - 이미지를 설명해 주는 대체 텍스트
width, height 속성 – 이미지 크기 조정하기
<figure>, <figcaption> 태그 – 이미지에 설명 글 붙이기

링크 관련

<a>태그, href 속성 - 링크 만들기
target 속성 – 새 탭에서 링크 열기
<map> 태그, <area> 태그, usemap 속성 – 이미지 맵 지정하기

폼 관련 태그

<form> 태그 – 폼 만들기
<label> 태그 – 폼 요소에 레이블 붙이기
<fieldset>, <legend> 태그 – 폼 요소 그룹으로 묶기
<input> 태그 – 입력 항목 만들기
type="hidden" – 히든 필든 만들기
type="text" – 텍스트 필드 만들기
type="password" – 비밀번호 입력란 만들기
type="search", type="url", type="email", type="tel" – 분화된 테스트 필드
type="number" – 숫자 입력하기
type="range" – 슬라이드 막대로 숫자 지정하기
type="radio", type="checkbox" – 라디오 버튼과 체크박스 넣기
type="color" – 색상 선택 상자 표시하기
type="date", type="month", type="week" – 날짜 표시하기
type="time", type="datetime", type="datetime-local" – 시간 지정하기
type="submit", type="reset" – 서버 전송, 리셋 버튼 넣기
type="image" – 이미지 버튼 넣기
type="button" – 버튼 넣기
type="file" – 파일 첨부하기
autofocus 속성 – 입력 커서 표시하기
placeholder 속성 – 힌트 표시하기
readonly 속성 – 읽기 전용 필드 만들기
required 속성 – 필수 필드 지정하기
min, max, step 속성
size, minlength, maxLength 속성 – 길이, 최소 길이, 최대 길이 속성

그 외 각종 태그

<select>, <optgroup>, <option> 태그 – 드롭다운 목록 만들기
<datalist>, <option> 태그
<textarea> 태그 – 여러 줄 입력하는 텍스트 영역 만들기
<button> 태그 – 버튼 넣기
<output> 태그 – 결과 출력하기
<progress> 태그 – 진행 상태 보여주기
<meter> 태그 – 값이 차지하는 크기 표시하기

CSS

  • 스타일의 형식

기본형: 선택자 { 속성:속성값; }

p { text-align: center; } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */ 
h2 {  
font-size: 20px; 
color: orange; 
} /* 2단계 제목의 글자 크기 20px, 글자 색상 주황색 */
  • 스타일 시트

→ 내부 스타일 시트

: 태그 안에서 정의해야 하고 태그 사이에 작성한다.

→ 외부 스타일 시트

: 기본형:

→ 인라이 스타일

: 해당 태그에 style="속성:속성값;" 형태로 스타일을 바꿀 수 있다.
예) <p style="color:blue;"> 인라이 스타일 </p>

  • 선택자
  1. 전체 선택자 – 모든 요소에 스타일 적용하기
  2. 태그 선택자 – 특정 태그에 스타일 적용하기
    1. 태그 { 스타일 }
  3. 클래스 선택자 – 특정 부분에 스타일 적용하기
    1. .클래스 이름 { 속성:속성값; 속성:속성값; ... }
  4. id 선택자 – 특정 부분에 스타일 적용하기
    1. #id 이름 { 속성:속성값; 속성:속성값; ... }
  5. 그룹 선택자 – 둘 이상 요소에 같은 스타일 적용하기
    1. 요소1, 요소2, ... {속성;속성값;...}
  • 우선순위 및 상속
  1. 중요 스타일 !important
  2. 얼마나 한정지을 수 있는가 – 명시도(Specificity): 적용범위가 좁을수록 우선순위가 높다.
    1. 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그에만 스타일을 적용
    2. id 스타일: 지정한 부분에만 적용되는 스타일이지만 한 문서 안에 한 번만 적용
    3. 클래스 스타일: 지정한 부분에만 적용되는 스타일이지만 한 문서 안에 여러 번 적용
    4. 태그 스타일: 웹 문서에 사용된 특정 태그에 모두 똑같이 적용
  3. 소스에서의 순서(Source Order)
    1. 같은 요소에 여러가지 스타일이 겹쳐질 때 가장 나중에 정의된 스타일을 적용한다.
  4. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요
    소로 전달되는 것이다.

텍스트 관련 스타일

  • font-family 속성 - body {font-family:"맑은 고딕", "돋움", "굴림";}
  • @font-face 속성 예시) @font-face {
    font-family:글꼴 이름;
    src:url(글꼴 파일 경로) format(파일 유형);
    }
  • font-size 속성 – 글자 크기 조절하기
  • font-weight 속성 – 글자 굵기 지정하기
  • font-variant 속성 – 작은 대문자로 표시하기
  • font-style 속성 – 글자 스타일 지정하기
  • font 속성 – 글꼴 속성을 한꺼번에 묶어서 표현하기
  • color 속성 – 글자 색 지정하기
  • text-decoration 속성 – 텍스트에 줄 표시하기/없애기
  • text-transform 속성 – 텍스트 대•소문자 변환하기
  • text-shadow 속성 – 텍스트에 그림자 효과 추가하기
  • white-space 속성
  • letter-spacing과 word-spacing 속성 – 텍스트 간격 조절하기
  • direction 속성 예시) h3 { direction:rtl; } / 제목을 오른쪽에서 왼쪽으로 표시 /
  • text-align 속성 – 텍스트 정렬하기
  • text-justify 속성 – 정렬 시 공객 조절하기
  • text-indent 속성 – 텍스트 들여쓰기
  • line-height 속성 – 줄간격 조절하기
  • text-overflow 속성 – 넘치는 텍스트 표기하기
  • list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기
  • list-style-image 속성 – 불릿 대신 이미지 넣기
  • list-style-position 속성 – 목록에 들여쓰기 효과 내기
  • list-style 속성 – 리스트 속성 한꺼번에 표시하기

색상과 배경을 위한 스타일

  • 16진수 표기법 - #ffffff/ 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양.
  • rgb와 rgba 표기법- color:rgb(255,0,0) / color:rgb(255,0,0,.3)
  • hsl과 hsla 표기법 예) #area2 { background:hsl(360,100%,75%); } / 색상은 빨강, 채도 100%, 밝기 75%인 색/
  • 색상 이름 표기법 - red나 yellow, black 처럼 색상 이름으로 표시
  • background-color 속성 – 배경색 지정하기
  • background-clip 속성 – 배경 적용 범위 조절하기
  • background-image 속성 – 웹 요소에 이미지 넣기
  • background-repeat 속성 – 배경 이미지 반복하기
  • background-size 속성 – 배경 이미지 크기 조절하기
  • background-position 속성 – 배경 이미지 위치 조절하기
  • background-origin 속성 – 배경 이미지 위치 기준 조절하기
  • background-attachment 속성 – 배경 이미지 고정하기
  • background 속성 – 속성 하나로 사용하기

레이아웃을 위한 스타일

블록 레벨 (block-level) 요소 - 한 줄을 차지하는 요소

<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

인라인 레벨 (inline-level) 요소 - 한 줄에 여러 요소를 표시

<img>, <object>, <br>, <sup>, <span>, <input>, <textarea>, <label>, <button>
  • 박스 모델(box model) - 박스 형태의 콘텐츠
  • width, height 속성 – 콘텐츠 영역의 크기
  • display 속성 – 화면 배치 방법 결정하기 예 ) display: none | contents | block | inline | inline-block | table | table-cell
  • border-style 속성 – 테두리선 스타일 지정하기
  • border-width 속성 – 테두리 두께 지정하기
  • border-color 속성 – 테두리 색상 지정하기
  • border 속성 – 테두리 스타일 묶어서 지정하기
  • border-radius 속성 – 박스 모서리 둥글게 만들기
  • box-shadow 속성 – 선택한 요소에 그림자 효과 내기
  • margin 속성 – 요소 주변 여백 설정하기
  • padding 속성 – 콘텐츠 영역과 테두리 사이 여백 설정하기

CSS3 선택자

  • 하위 선택자 – 지정한 모든 하위 요소에 스타일 적용하기 예) section p { color: blue; }
  • 자식 선택자 – 자식 요소에만 스타일 적용하기 예) section > p { color: blue; }
  • 인접 형제 선택자 – 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 적용 예) h1 + p { text-decoration: underline; }
  • 형제 선택자 – 모든 형제 요소에 다 적용 예) h1 ~ p { text-decoration:underline; }
  • [속성] 선택자 – 지정한 속성에 스타일 적용하기 예) a [href] { background:yellow; }
  • [속성 = 값] 선택자 – 특정 값을 갖는 속성에 스타일 적용하기
  • [속성 ~= 값] 선택자 – 여러 값 중 특정 값이 포함된 속성에 스타일 적용
  • [속성 |= 값] 선택자 – 특정 값이 포함된 속성에 스타일 적용하기
  • [속성 ^= 값] 선택자 – 특정 값으로 시작하는 속성에 스타일 적용하기
  • [속성 $= 값] 선택자 – 특정 값으로 끝나는 속성에 스타일 적용하기
  • [속성 *= 값] 선택자 – 값의 일부가 일치하는 속성에 스타일 적용하기

'궁금해서 해본 거 > Web' 카테고리의 다른 글

Domain Name Server  (0) 2025.10.19
WAS - Web Application Server  (0) 2025.09.29
'궁금해서 해본 거/Web' Related Articles more