HTML & CSS 요약

오정배·2023년 8월 19일

CSS html

HTML & CSS 스터디

목록 보기

5/6

HTML - Hyper Text Markup Language

블록 레벨 요소

좌우 양끝으로 늘어나서 가능한 모든 너비를 차지한다.(자동 줄 바꿈)
블록 in 인라인 불가능 / 인라인 in 블록 가능
- 예외로 a태그는 안에 블록 요소 중첩 가능함.
크기 지정 및 속성 사용 가능함.
<article>, <section>, <header>, <nav>, <div>, <p>, <form> 등이 있다.

※ 태그 별 설명

article 태그

본문 주제와 관계 없고, 있어도 없어도 기능에 영향을 주지 않는다.
네이버 블로그의 위젯 또는 뉴스 사이트 같은 기능

section 태그

article 태그와 비슷하나 본문 주제와 연관성이 있다.

header 태그

특정한 컨텐츠의 시작 부분

nav 태그

문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여준다.

div 태그

콘텐츠 분할 요소(여러 태그들을 그룹핑하기 위한 태그)

p 태그

paragraph의 약자로 하나의 문단을 나타낸다.

form 태그

사용자에게 입력받은 정보를 제출하기 위한 구획이다.

	1) method 속성
	- 양식을 제출할 떄 사용할 HTTP 메소드

	2) action 속성
	- 양식 데이터를 처리할 URL 작성(데이터를 어디로 보내는 지)

	3) POST
	- 브라우저에 의해 캐시되지 않고, 히스토리에 남지 않는다.
	- 데이터 길이 제한 없다.

	4) GET
	- 양식 데이터를 action URL과 ?구분자 뒤에 이어 붙여서 전송함.
	- 데이터 길이 제한 있음.

	5) name / value
	- 이름 값의 짝으로 양식과 함께 전송된다.

	6) autocomplete 속성
	- 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄(ON이 기본값)

7) fieldset & legend

form 관련요소 들을 묶을 때 사용한다.
legend는 그룹의 이름을 제공한다.

인라인 레벨 요소

딱 할당된 공간만 차지한다.(자동 줄 바꿈하지 않음)
크기 지정은 불가능하고, 속성은 사용가능
- 예외로 위아래 margin 속성은 사용 불가능하다.
- (2023.08.19 추가) margin:auto는 해당 영역값을 기준으로 자동으로 맞춰야하는데
  inline 요소의 경우에는 영역값이 딱 컨텐츠 크기이기 때문에 자동으로 맞출 수가 없다.
<span>, <strong>, <a>, <input>, <button>, <label> 등이 있다.

※ 태그 별 설명

span 태그

내용 중 일부분에 스타일 적용하려고 할 경우 사용

strong 태그

강조하고 싶은 부분을 감싸서 강조함.

a 태그

위치, 파일, 이메일 주소 외 URL로 연결할 수 있는 하이퍼링크를 만든다.

input 태그

사용자가 입력할 수 있도록 입력창을 만드는 요소

1) checkbox 타입
다중 선택하거나 선택 해제 가능한 타입
<input type="checkbox" name="html" id="html">
<label for="html">html</label>

2) radio 타입
깉은 name을 가진 여러 값 중에 하나의 값만을 선택한다.
<input type="radio" name="gender" value="male" id="male>
<label for="male">남성</label>

button 태그

사용자가 클릭할 수 있는 요소

3가지 type이 있다.
-> button : 클릭해도 아무일이 일어나지 않는다.(Javascript와 연결하여 사용)
-> submit : 서버로 양식 데이터를 제출한다.
-> reset : 초기값으로 되돌린다.

버튼 만들 때는 두가지 방법으로 만들 수 있다.
<input type="button" value="버튼">  /  <button type="button">버튼</button>

1) input 사용할 경우에는 value 값에 텍스트 밖에 오지 못한다.
2) button 사용할 경우에는 여러 컨텐츠 삽입이 가능함.

label 태그

사용자 인터페이스의 항목을 나타낸다.(input과 함께 사용한다.)

1)for 과 id를 이용하여 연결
<label for="user-id">아이디</label>;
<input id="user-id" type="text">;

2) lavel 내 input 중첩
<label>
	아이디
    <input type="text">
</label>

기타 태그

section

footer 태그

페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
페이지의 하단 부분

main 태그

body 태그의 주요 컨텐츠(웹페이지에서 한번만 사용 가능.)

aside 태그

문서의 주요 내용과 간접적으로 연관된 부분을 나타낸다.
광고 배너 등에 사용

h1~h6 태그

중요도에 따라 사용하며, 순서대로 작성해야한다.

br 태그

강제로 줄바꿈 한다.

ht 태그

단락을 구분 짓는 선 작성

code 태그

짧은 코드 조각(한줄) 표현 시 사용

pre 태그

html에 작성한 내용 그대로 표현 시 사용

ol 태그

순차적 목록 (순서가 있어야하는 목록에 사용)

ul 태그

비순차적 목록 (순서 상관없는 목록에 사용)

li 태그

ol 또는 ul 태그의 자식으로만 사용하는 요소

media

img 태그

이미지 삽입
src, alt는 같이 와야한다.

table

tr, th, td

tr(table row): 테이블의 행
th(table header): 테이블의 행, 열의 제목
td(table data): 셀 내용

caption

테이블의 제목이나 설명을 의미한다.
무조건 table의 첫번째 자식으로 사용해야한다.

thead, tbody, tfoot

구역을 나누는 용도(필수는 아니지만 코드의 가독성을 위해 사용하면 좋다.)

colspan(열병합), rowspan(행병합)

셀 병합

CSS - Cascading Style Sheets

선택자

header {
	color: royalblue;
    }

여기서 header가 선택자에 해당된다.

선택자를 어떻게 하느냐에 따라 천차만별로 달라진다.

전체 선택자 (가중치 0점 - 우선순위 최하)
* {}
타입(유형) 선택자 (가중치 1점 - 우선순위 하)
h1 {}
가상요소 선택자 (가중치 1점 - 우선순위 하)
- 자손(하위) 선택자
  section p {}
  공백(띄어쓰기)으로 표현
  자식과 자손 모두 선택
- 자식 선택자
  section > p {}
  직계 자식만 선택
- 일반 형제 선택자
  h1 ~ p {}
  같은 수준의 뒤에 따라오는 형제 선택함.
- 인접 형제 선택자
  h1 + p {}
  바로 뒤에 인접한 형제만 선택
클래스 선택자 (가중치 10점 - 우선순위 중)
.fc-red {}
여기서 fc-red 앞에 있는 " . " 이 클래스를 나타내는 기호

가상클래스 선택자 (가중치 10점 - 우선순위 중)

:link		<-- 방문하지 않은 링크
:visited	<-- 방문한 링크
:hover		<-- 마우스를 올려놓았을 때
:active		<-- 클릭했을 때
:focus		<-- 포커스 되었을 때

apple:first-child	<-- 형제 요소 그룹 중에 첫 번째 요소
apple:last-child	<-- 형제 요소 그룹 중에 마지막 요소
apple:nth-child	<-- 형제 사이에서 순서에 따라 요소를 선택

속성 선택자 (가중치 10점 - 우선순위 중)
[type="button"] {}
주어진 특성을 가진 모든 요소 선택
아이디 선택자 (가중치 100점 - 우선순위 상)
#fc-red {}
여기서 fc-red 앞에 있는 " # " 이 아이디를 나타내는 기호
해당 아이디를 가진 요소 선택
※ HTML 페이지 내에서 아이디는 하나만 있어야 한다.

CSS 적용방법

인라인 방식

각 태그에 style 속성으로 스타일 부여함

내부 스타일 방식

head 태그 내부에 style 태그로 스타일을 부여하는 방식

외부 스타일 방식(가장 권장되는 방식)

link 로 현재 문서와 외부 리소스와의 관계를 명시
빈 태그로 속성만을 포함

CSS 상속

상속되는 속성
대표적으로 color
상속되지 않는 속성
크기와 관련된 속성
width, height, margin, padding, border 등

display 속성

박스의 유형을 결정한다 -> 시각적인 요소만 수정한다.

display:block
줄바꿈
display:inline
줄바꿈 안하는 inline 요소 생성
dispplay:inline-block
줄바꿈 없이 한 줄에 놓이지만 width, height, padding, margin 등 설정 가능
display:flex (중요하다고 생각함.)
내부 자식 요소들을 부모 컨테이너 요소 안에서 xy축 단방향으로 설정

추후 따로 정리 예정

CSS 단위

px
절대적인 수치
%
부모요소를 기준으로 비율
em
부모요소로부터 상속받은 글자크기 기준
rem
최상의 요소(html)의 글자크기를 기준으로 한다.(기본 16px)
vw, vh
뷰포트 너비, 높이를 기준으로 하는 백분율 단위

기타

마진병합 현상

요소와 요소 사이에 마진 공간이 있을 경우 더 큰 값으로 적용함.
부모 요소와 자식 요소가 존재할 때 자식 요소의 마진 탑 or 바텀은 부모의 마진에 영향을 미치지 않는다.

box-sizing

content-box(기본값)

요소의 width 에 padding과 border 값이 포함되지 않음

예를 들어 .box {width: 350px; border: 10px solid black;} 을 적용할 경우 이 박스의 너비는 350px가 아닌 border 즉 테두리 10px을 더한 값인 370px이 된다.

border-box

요소의 width 에 padding과 border 값을 포함함.

예를 들어 .box {width: 350px; border: 10px solid black;} 을 적용할 경우 이 박스의 너비는 border 10px을 포함하여 350px이다.

overflow

박스보다 콘텐츠가 더 클 경우

visible(기본값)
컨텐츠가 박스를 넘어가도 자르지 않음
hidden
컨텐츠가 박스를 넘어갈 경우 자른다.
scroll
요소의 크기만큼 자르고 스크롤을 제공
auto
자동으로 박스에 사이즈에 따라 스크롤을 제공

background

color
배경색
image
배경이미지
position
배경 위치
repeat
- repeat : 반복
- no-repeat : 반복하지 않음.
- repeat-x : x축으로만 반복
- repeat-y : y축으로만 반복
size
- contain : 화면에 맞춤
- cover : 찌그러지지않는 한도에서 제일 크게