2023.11.27~28 총정리

2023.11.28 총정리 

 

1. 만들고 싶은 사이트 모양 구성하기

2. 사이트를 브록단위로 구분하기 (header, section, footer 등)

 

3. 안에 들어갈 태그 예상해보기(코드 짜면서 수정되는 부분도 있다.)

 

 

>>앞으로 사이트 완성할 때 까지 가이드 라인이 됨(html과 css배치에 대해서)

 

4. 코드를 작성하는 순서

1. HTML 내용부터 작성

내용이 없어도 나중에 글이 들어갈 부분은 아무말이나 적어서 작성

(why? 미리 글이 들어갈 위치를 정해두면 css하기 편하다.)

2. CSS 내용 작성

위와 같은 순서로 작성했을 때, 좀 더 css(디자인)에 집중할 수 있다.

 

* HTML 작성할 때 주의할 점 *

1. 크게 분류해서 태그작성(header, section 등)

2.한 영역(ex header 와 같은 공간)을 사용할 때, 주석을 달아서 미리 알아보기 쉽게 메모 및 안내설명 적어놓기. 그럼 추후에 수정 및 추가할 때 편하다.

3.안에서 공간을 분리할 때 div 태그를 사용해서 분리시킴. 그리고 특정영역 디자인 위해 class를 사용해서 디자인 함.

 

* CSS 작성할 때 주의할 점 *

1. 혼자 작업시, 위에서 아래로 작업 진행시 편함.(why? 태그가 먼저 나온 것은 위에 배치, 그 뒤에 나온건 아래에 배치)

2. 먼저는 큰 분류(header, section 등) 먼저 크기를 잡고 진행  그 뒤에 높이 지정, 범위를 알기 위해 배경색상 지정

3. HTML 상위영역 하위영역 관계에서 볼때, 상위영역부터 디자인(높이,넓이 등) 한다.

  (무조껀 지키라는건 아니고 나중에 편한대로 순서 바꿔도됨)

4. 같은 공간에 있는 디자안은 아래 사진 처럼 서로 가까이 ,바로 아래에 작성하는게 좋다.

5. 예외는 하위영역 중에 div 태그에 그림을 넣을 때는 크기를 알기 위해 미리 지정해주는게 좋다. 

(why? div는 크기가 지정되어있지 않기 때문에)

 

html

 

 

 

 

* CSS 에서 배경화면 추가하는 방법 *

 

 

backgound-image를 이용해서 그림을 추가할 수 있다.

div를 사용할 때는 선행으로 반드시 너비와 높이를 지정해야한다. (지정하지 않으면, 그림이 보이지 않는다.)

pic 123을 묶어서 한번에 미리 높이 넓이 설정한 모습

 

 

 

Display:flex;

상위영역 안에있는 하위영역을 정렬시 사용. (많이 사용하는 기능)