Front-end/HTML 5, CSS3

1. 웹 퍼블리싱

prden 2022. 11. 5. 10:35

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

'Front-end/HTML 5, CSS3'의 다른글

  • 현재글1. 웹 퍼블리싱

관련글

티스토리툴바