1. 인터넷과 웹의 관계 :
파이어폭스, 엣지, 크롬 등 은 문서를 전달하기 위한 프로그램 (http를 통해)
Hyperlink , Hybertext
Mosaic 브라우져 : 최초의 브라우저이다. -> Mosaic 이용해서 인터넷 익스플로러로 개발했다.
2. MarkUp(<>)
<!-- 문서의 기본 구조 -->
DOCTYPE쓰는 이유 :
똑같은 태그를 이용해서 html문서 만들어도 브라우저가 달라지면 결과가 달라지게 되어서 각각의 브라우저들이 공통으로 표준화된 방식 만듬
<!DOCTYPE html> - 이걸 쓰면 표준화된 방식으로 모든 브라우저에서 렌더링 됨
<html>
<head>
head 태그는 HTML문서에 대한 기본 정보를 포함하는 영역으로 문서의 제목이나 제작자(소유자), 문서정보 등을 기술한다.
이러한 정보는 웹 페이지에 보이는 부분은 아니나, 웹 브라우저에게 필요한 내용을 알려주는 역할을 한다.
head태그 내에는 아래의 태그 등을 사용한다.
1)<title>
2)<link> - 스타일 시트 파일 등의 외부 문서를 HTML 문서로 불러와 연결해 사용
3)<script> - 스크립트를 문서에서 바로 작성 or 외부 위치한 스크립트 파일을 HTML문서로 불러와 연결할 때 사용
<script>는 body사이에도 사용할 수 있다.
4)<style>
5)<meta> - <head>태그의 다른 내부 태그들로 표현할 수 없는 다양한 정보를 기술하기 위해 사용되는 태그로,
웹 페이지에 표시되지 않지만 웹 브라우저와 검색엔진에 정보 제공역할을 한다.
<meta charset="UTF-8" />
-> 문서의 문자 인코딩 방식을 알려줌
<meta name="author" content ="ddd">
-> author는 저자를 의미, description은 웹 페이지의 설명을 의미, application-name:웹 애플리케이션의 이름
viewport: 웹 페이지의 뷰 포트 영역, keywords:검색엔진에 적용되는 키워드 목록, generator: 문서에 사용되는 소프트웨어 페키지
p : paragraph
<p>브라우져 화면에 보일 설정 적용(화면에 들어갈 내용 넣으면 안됨)</p>
<title>first page</title>
</head>
<body>
<h1> body와 head의 차이 </h1>
<p>head와 body 순서 변경되면 안된다.</p>
</body>
</html>
HTML TAG 집합
#########################################################################################################
<블록 태그>- 항상 전체 너비를 차지하는 덩어리 태그로 줄바꿈 발생 vs.<인라인 태그> - 자신의 크기만큼만 차지
#########################################################################################################
블록태그 : https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
인라인 태그 : https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements
블록 태그 내부에는 다른 블록태그와 인라인 태그가 중첩될 수 있다.
블록 태그 중 <p>태그 내부에는 인라인 태그만 중첩될 수 있다.
인라인 태그 내부에는 다른 인라인 태그만 중첩될 수 있다.
(제목?, 목록?, 표?, 문장?, 입력폼?) 5가지를 명화히 구분해서 잡기
1. 제목(Headline) :
<h1> ~ <h6>까지 있다.
2. 목록(List) :
<ul/> : 정렬되지 않은, 순서가 없는 목록 - 숫자가 안 보이고 점으로 표시
<ol/> : 정렬된 리스트 - 숫자가 보인다.
<ul>, <ol>안에 <li>들어감
## 단어-정의 나 질문-답 과 같은 경우에 사용할 수 있다.
<dl> - 정의 목록을 만들 때 사용
<dt>제목</dt>
<dd>설명</dd>
<dd>설명</dd>
<dd>설명</dd>
...dd 여러 개 가능
</dl>
<dl>태그는 반드시 하나 이상의 <dt>-<dd> 태그의 짝을 포함해야 하며, 이때 하나의
<dt>태그가 여러 개의 <dd>태그를 중첩하거나, 여러 개의 <dt>태그가 하나의<dd>태그를 가질 수 있다.
<dl>
<dt>어묵탕</dt>
<dd>따뜻한 국물..</dd>
</dl>
<dl>
<dt>주소:</dt>
<dd>서울특별시 성북구 종암동</dd>
<dt>관리자 메일: </dt>
<dd>sldkfj@naver.com</dd>
<dt>통신 판매업</dt>
<dd>신고제 20200- 아나가-222호</dd>
<dt>상호</dt>
<dd>newlecture</dd>
</dl>
3. 문장 :
<div/>
영역을 나눌 때 쓰는 이도저도 아닌 것 들
<div>1/1page</div>
<div>
<div>이전</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>다음</div>
<p>태그는 문단을 나타낼 때 쓰는 블록태그이며, <br/>태그는 문단 내부에서 줄 바꿈을 표현하기 위해 사용되는 싱글, 인라인태그이다.
<prd> 태그는 이 태그로 감싸진 텍스트에 적용된 엔터(줄바꿈), 탭(들여쓰기), 스페이스바(띄어쓰기) 등이 코드에 작성한 그대로 출력되는 태그이다.
<hr/> 태그는 텍스트 사이에 구분선을 넣어주는 싱글, 블록태그이다.
예약어 :
4. 표 : <table/>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td>자바 백엔드 개발자들을 위한 새로운 강의 </td>
<td>김성준</td>
<td>2021-02-02</td>
<td>10</td>
</tr>
</table>
입력폼 : <form/>
##################################################################
<시멘틱 태그>
<div>와 같은 역할이지만 의미를 갖는다
<header/> :
<main /> :
<footer/> :
<섹션 태그> - 제목을 나누는 태그
div대신 section을 쓸 경우 <section>안에는 h1같은 태그 달 때 첫 시작을 h1으로 하면 된다. 상위에 h1있어도
<시멘틱 섹션>
section이랑 동일한 기능인데 의미를 부여하고 있는 것
<section />
<article> : 내용이 있을 경우
<aside/> : 사이드 바쪽
<nav /> : hyberlink 타고 넘어갈 때 , 링크가 될 애들<a href="" >
##################################################################
<인라인 태그> - 자기영역을 갖지 않는다
<br> : 내려쓰기
div는 블록 태그임
<div>로 감싸면 블록으로 감싸짐, 스스로 영역을 갖기 때문에 - 기본적으로 브라우저 너비 꽉 채움
<img>
<input>
<cite>인용...
3. 상대경로와 절대 경로
/ : 절대 경로 (루트에서 찾아보는 경로)
내가 있는 디렉터리를 기준으로 : 상대 경로
./ : 현재 내가 있는 디렉터리 (이건 써도 되고 안 써도 된다.) notice/list.html ==./notice/list.html
../ : 한 칸 상위 폴더
../../ : 두 칸 올라가는 것
-> 상대 경로로 통합해서 쓰는 게 좋다.
4. html vs Xhtml
html은 단일 태그의 경우 <br>이렇게 쓰고 xhtml은 <br/>이렇게 써준다.
SGML -> HTML(HTML의 meta 언어가 SGML)
5. 시멘틱 웹과 XML & XHTML과의 관계
에이전트가 문서를 볼 때 이해할 수 있도록 문서를 설정
XML : extensible : 확장 가능하게 태그를 미리 정의해 놓지 않는 것
XML -> XHTML (태그를 미리 정의해 놓지 않고 <> 규칙만 맞춰서 써줌)
6. 디자인 완료된 파일 받았을 때
1) 방을 만들고 -> 방을 나누고 -> content를 넣어야 함.
7. HTML 문서에 스타일을 지정하는 방법
1) Inline : html문서 내부에 직접 스타일 속성을 지정하는 방법
2) Internal : 스타일 지정이 많이 필요하지 않고 문서가 독립적인 스타일을 가질 때 적용할 수 있다.
3) External : <link>를 통해 외부에 스타일 시트를 따로 작성한 뒤 링크로 연결하여 적용시키는 방법
8. 콘솔에서 css 없애기
document.head.parentNode.removeChild(document.head)
9. 폰트
사이즈
1) px : 해상도와 관련
- 고정적인 사이즈
2) rem: html 태그의 폰트 크기를 기준(16px)으로 배수에 해당하는 크기를 가지게 하기 위해서 사용하는 단위이다.
- 반응형 웹에서 자주 사용하는 단위이다.
3) 웹 브라우저의 기본 폰트사이즈는 16px
4) em : 기준은 자신의 부모 태그를 기준으로 배수에 해당하는 크기를 가지게 하기 위해 사용하는 단위이다.
5) vw : 화면의 가로 크기와 관련 있는 단위로 1vw는 화면 가로 크기의 1/100이다.
6) vh : 화면의 세로 크기와 관련 있는 단위로 1vh는 화면 세로 크기의 1/100이다.
color -> 16진수 아니면 rgba로 사용할 수 있다.
font-family: [글꼴], [글꼴유형];
1) 글꼴유형(generic-family ex) 고딕, 필기체, ...) : serif, sans-serif, cursive, fantasy, monospace
font-weight : 굵기단위 (100 ~900) - 내가사용하는 글꼴에서 굵기 단위를 제공하는지 먼저 확인해야 함.
1) normal
2) bold,
3) bolder,
4) lighter
line-height : 글자의 줄높이를 지정하는 css 속성이다.
- 크기단위 or 배수(font-size 기준)
font-size:20px,
line-height: 1.5 하면 p 태그의 줄 높이는 20*1.5로 30px로 적용됨
line-height: 20px로 지정하면 font-size와 상관없이 20px로 적용됨.
항상 font-size보다는 크게 지정해야한다.
클래스 중복 적용시
class = "color hello" -> 두개 동시에 먹는다.
css 선택자 :
*{} : 전체 선택자
p{} : 태그 선택자
.hello{} : 클래스 선택자
#id1{} : 아이디 선택자
> : 자식선택자
유형별 공부
1. background
background-image : no-reapeat
backgroud: url()
2. flex
- align-items
- display : https://www.daleseo.com/css-display-inline-block/ (inline, block, inline-block)
- overflow
3. position
element들은 top, bottom, left, right property있는데 position이 먼저 정의 되어 있어야 먹는다.
top : 위에서 얼마나 떨어져 있는지, bottom: 아래에서 얼마나 떨어져 있는지
1) static : top, bottom, left, right가 적용 안된다. -> float로 움직여야한다.
2) relative : 원래 자기가 있어야할 자리에서 top, left, bottom, right 먹는다.
3) absolute : 부모요소가 relative로 지정되어 있는 상태에서 top, bottom, left, right 먹일 수 있다.
4) fixed : 브라우저 창을 기준으로 특정 영역에 고정시켜서 보여준다.
4.float : 이미지, 텍스트 나란히 표시하고자 할 때 이미지에 float속성 넣으면 옆에 자연스럽게 글자가 붙는다.
- clear:both;
::after – 실제 내용 바로 뒤에서 생성되는 자식요소
::before – 실제 내용 바로 앞에서 생성되는 자식요소
http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/
[공유]::before와::after, 그들의 정체는?
[공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한
blog.hivelab.co.kr
'Front-end > HTML 5, CSS3' 카테고리의 다른 글
| 반응형 css (Making our Website Responsive) (0) | 2023.07.16 |
|---|---|
| Css Advanced (Section 7~) (0) | 2022.11.12 |
| BEM 방법론, SASS와 SCSS (0) | 2022.11.05 |
| data-* 속성 (0) | 2022.01.30 |
| 2. HTML 태그 (0) | 2021.11.13 |