모스카토

프론트엔드 기초 본문

엘리스 ai트랙

프론트엔드 기초

라리라밤 2022. 1. 11. 14:02

[배경지식]

1. 웹사이트 제작할 때 고려할 사항

1. 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격

* 잘지키면 검색엔진에서 상단에 노출될 확률이 높아진다.

2. 웹 접근성 : 사용자의 장애여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식

3 . 크로스 브라우징 : 모든 브라우저의 종류, 버전 또는 모든 기기에서 사이트가 제대로 작동하도록 하는것.

 

2. html문서 기본구조

<!DOCTYPE html>   html5 언어로 구성돼있다고 선언.

<html></html>     모든 내용을 감싸는 태그 -> 문서의 시작과 끝을 의미

<head></head>     웹사이트의 간단한 요약정보, 사용자에게 보여지지 않는다.   

<meta charset="UTF-8">  character setting : 문자열 설정 / UTF-8 : 모든 문자코드를 보여줄 때 주는 속성. 한글이 깨질때 확인하기   

<title></title>    상단탭 제목

<body></body>      웹사이트에서 사용자에게 보이는 부분, 태그 자체도 컨텐츠가 될수있다.

 

3. CSS

스타일 적용 우선순위는 style > id > class > type 이다.

 

4. 프로그래밍이란?

개발자가 컴퓨터와 소통하는 방법

 

[ html 이란? ]

1. 웹을 구성하는 요소

① html = hyper text markup language : 눈에 보이는정보, 특정 구역을 설정할 때 사용하는 언어

② css = Cascading Style Sheets : 디자인 스타일링

③ javascript : 웹사이트에 기능과 동적효과를 부여한다.

 

2. 태그 구성요소

<열린태그 속성="속성값"> 컨텐츠 </닫힌태그>* 속성 :  태그의 추가정보* 속성값 : 속성에 값을 줌

 

3. html 주요태그

1. 주석 : <!-- 코드에 영향을 주지 않는 내용 작성 -->

2. <img>

src : 이미지 파일경로

alt : 웹사이트가 이미지를 출력하지 못했을 경우 텍스트 정보로 대체

3. <h></h>

heading 제목, 부제목, h뒤에 숫자가 작을수록 큰 폰트크기. 1~6까지 * h1은 가장 중요한 정보, html문서 하나에서 한번만 사용

4. <p></p>

paragraph 본문내용, 문단을 넣을 때 사용.

5. <ul><li></li></ul>

unordered list 순서가 없는 리스트 생성. 메뉴버튼 만들때 사용되는 태그

6. <ol><li></li></ol>

ordered list 순서가 있는 리스트 생성.

7. <a></a>

href="링크주소" : 이동할 링크 주소 입력

target="_blank" : 새로운 탭에서 링크열기

 

4. 공간을 만들때 사용하는 태그

1. <header>

웹사이트의 상단영역, 머리글, 일반적으로 로고와 내비게이션을 담고 있다.

2. <nav>

로고와 navigation 메뉴버튼을 담는 공간, ul li a 태그와 함께 주로 사용함

3. <main>

본문영역, 안에 article태그로 구분가능 

* role = "main" 프로퍼티 추가 필수 : ie에서 main 태그를 지원하지 않아서

4. <article>

태그내에 구역 대표 타이틀 h태그 하나이상 존재해야함.

5. <footer>

웹사이트의 하단영역, 웹사이트 소유 회사정보, div : 임의의 공간

 

5. html의 두가지 성격

1. Block요소 : 자동으로 줄바꿈 현상이 나타남. 넓이, 높이를 설정하여 공간을 만들수 있다. 상하배치작업이 가능하다

2. Inline 요소 : 줄바꿈현상 없이 x축으로 정렬된다. (한줄에)공간을 만들 수 없고, 상하 배치작업이 불가능하다.

 

[ css 란? ]

1. CSS = Cascading Style Sheet

1. css의 역할 : 레이아웃과 스타일 정의

2. css 사용방법 : 선택자 { 속성 : 속성값; }

선택자 : 디자인을 적용할 html영역

속성 : 어떤 디자인을 지정할지 선택

속성값 : 디자인의 값을 무엇으로 줄지 , 세미콜론 필수입력.

3. css 연동방법 세가지

1) inline style sheet

html태그 안에 style속성을 통해 css를 준다

2) Internal Style sheet

head태그에 style태그 <style></style> 를 통해 css를 준다.

3) external style sheet -> 가독성과 유지보수 장점

css 파일을 생성하고 head태그에 link태그 <link rel="stylesheet" href="style.css">를 통해 연동

* 열린태그, rel="stylesheet" 포함-> rel속성 : 연동한 파일이 어떤 속성인지 , href안에 css파일 경로

 

2. css 선택자

1. type selector: 태그를 이용해 선택    그냥 태그명

2. class selector : 클래스 이름으로 선택    .클래스이름

3. id selector : id로 선택    #아이디

 

3. 부모자식관계

1. 부모자식관계 : 부모태그와 부모 태그 한 칸 안에 있는 태그의 관계

<div>                      
	<h1>hello</h1>         // body > h1
</div>

2. 형제관계 : 같은 부모 안에 같은 들여쓰기로 있는 태그들의 관계

<div>
	<h1>hello</h1>         // h1 + p
	<p>welcome</p> 
</div>

3. 자손관계 : 부모 태그와 부모태그 안에 있는 모든 태그들간의 관계

<div>
	<h1>hello</h1>               // div li
    <ul>
    	<li>name</li>
        <li>age</li>
    </ul>
</div>

 

4. 캐스케이딩 : css 우선순위 결정하는 세가지 요소

1) 순서 : 더 아랫줄에 쓴 코드가 우선순위가 높음

2) 디테일 :  선택자의 위치를 더 구체적으로 작성

3) 선택자 : style > id > class > type(tag) 

* 실무에서 다른사람의 코드를 수정할 때 우선순위를 많이 이용함.

 

5. css 주요속성

1. width, height

* 단위 : px, %, em, rem 등

* 가변단위를 사용할 때 기준은 부모태그이다.

 

2. font

1) font-size : 글자크기

2) font-family : 글꼴설정, 브라우저마다 지원하는 폰트 다름. 

* sans-serif를 마지막에 작성 <- 모든 브라우저에서 지원하므로 디폴트입력

3) font-style : italic

4) font-weight : 글자두께 100~900

 

3. border

1) border-style : 테두리 스타일 solid, dotted, 

2) border-width : 테두리 굵기

3) border-color : 테두리 색상

4) border : style width color을 순서상관없이, 쉼표 사용없이 쓸 수 있다.

 

4. background

1) background-color : 배경 색상

2) background-image : url(이미지경로)

3) background-repeat : 이미지 반복여부 및 반복방법

4) background-position : 이미지의 위치, 좌표

5) background : 순서, 쉼표 상관없이 속성값을 줄수 있음.

 

[웹사이트의 레이아웃] : css레이아웃을 이용해 구성요소들 배치

1. 박스모델 : 공간을 border를 기준으로 margin, padding을 나누는 모델

1) margin : border 바깥 영역

2) padding : border 안쪽, content 바깥 영역

* padding을 주면 기존에 주어진 넓이와 높이에 영역이 추가된다.

3) border : 테두리

4) content : 내용

 

2. Block요소와 Inline요소

1. Block요소 -> width, height, margin, bottom 값 적용됨.

  ▷ p, header, div, h1~h6,

2. Inline 요소 -> width, height, margin과 padding의 top, bottom이 적용안됨.

  ▷ a, span 

 

3. 마진 병합 현상

1. 형제간의 마진병합 : 형제관계인 태그들에 마진을 줄 경우, 더 큰 값만 적용된다.

2. 부모자식간의 마진병합 : 자식에게 마진값을 줬을 때 부모에도 적용된다.

 

4. 레이아웃에 영향을 미치는 속성

1. display : 원래 태그의 block, inilne 성격을 바꿀 수 있다.

2. float : 띄워서 새로운 레이어층을 만들 수 있다. 

* 왼쪽에 연속으로 정렬하려면 각 요소에 float:left를 줘야함.

3. clear : float을 사용했을 때 레이어층이 겹치는 현상을 돌려줌.

* 마지막으로 float을 사용한 태그 다음 태그에 주면됨. 

* both 값을 주면 float : left, right 모두를 리셋함.

4. html, body 태그는 기본 margin, padding값을 가지므로 처음에 margin, padding값을 초기화 해줘야함.

*{ margin : 0; padding: 0; }

 

 

저작자표시 (새창열림)

'엘리스 ai트랙' 카테고리의 다른 글

자바스크립트 기초  (0) 2022.01.18
Git  (0) 2022.01.15
반응형 웹  (0) 2022.01.13
[css] Transform Transition Animation  (0) 2022.01.13
[mac] SSH로 git 계정 여러개 등록하기  (0) 2022.01.13
'엘리스 ai트랙' Related Articles more
Comments