[생활코딩] CSS 7. 그리드 (레이아웃 제작)

* [생활코딩] CSS 목차
 
 

1. 디자인용 나누기 태그

1. div

- 블록 레벨 엘리먼트
- 부모와 자식으로 감싸서 사용할 수 있음
 

2. span

- 인라인 엘리먼트
 
 
 

2. Grid 장점

- 자동으로 커짐
- 최신 기술
 
 
 

3. 실습 : 그리드

1. 결과

- 글자를 회색 테두리로 감싸기 : div 이용
- 분홍 테두리로 묶어서 감싸기 : div 이용
 
 
2. 코드

 
- div를 부모 자식 관계로 중첩해서 사용
 
1) 부모 div: 분홍색
- id를 grid로 설정
 
2) 자식 div: 회색
- fr : 화면 전체를 자동으로 쓰게 하는 단위, 비율 (1fr, 2fr)
 
 
 

4. 실습 : 레이아웃 제작

1. 결과

 
- 본문을 하이퍼링크 오른쪽으로 옮기기
- div 이용
 
 
2. 코드
1) style 태그 내부

 
- grid 기능 활용
- 본문은 article
 
 
2) body 내부

 
- div에 id 추가
- grid는 하이퍼링크, article은 본문