지피티활용능력1급
2023.07.25 모각코 4회차 결과 본문
본격적으로 css에 대해 다뤄보려고 한다.
html파일 내부에 <style>태그를 이용해도 되지만 보통 css파일을 생성해서 <link>태그를 이용해 가져오는 방식을 선호하는 편이다.
href="css파일명"을 적어주면 css파일과 연결된다.
웹페이지에 도형들로 어떠한 모양을 표현하는것으로 css를 본격적으로 탐구해보자
오늘의 목표는 웹 페이지에 다음과 같은 모양의 그림을 표현하는 것
1. html
먼저 html을 설계해보면 하나의 div박스와 그 안에 들어있는 3개의 div박스
wheat색의 큰 박스의 div를 클래스 명 "wheat"라 두고
내부의 세 개의 박스를 wheat의 자식으로 넣어준다.
2. css
배경색을 토마토색으로 지정해준 후 div박스가 화면 정중앙에 위치할 수 있도록 다음 세가지 작업을 해준다.
이렇게 하면 body의 자식인 wheat클래스가 화면의 정중앙에 위치하게 된다.
다음은 wheat 클래스이다.
목표 그림의 wheat박스 내부를 보면 세 개의 박스들이 정중앙에 고르게 분포해있고 세로로 정렬된 것을 볼 수 있다.
wheat박스의 내부 박스들에게 적용시켜야 하기 때문에 부모인 wheat에 다음 4가지 코드를 작성해야 한다.
flex-direction:column을 적용시키면 가로로 정렬되어 있는 박스들이 세로로 정렬된 모습을 볼 수 있다.
마지막으로 안에 있는 박스들이다.
teal 클래스는 양 옆 정사각형 박스들이고 tealdash 클래스는 가운데 길쭉한 직사각형 모양의 박스이다.
기존에는 박스들이 붙어서 모여있겠지만 부모인 wheat에 적용시킨
다음 코드들에 의해 wheat 박스 정가운데 세로로 정렬되게 된다.
다음 html과 css를 모두 저장한 후 웹페이지를 열어주면
원래 목표했던 그림이 나오는 것을 확인할 수 있다.
+vscode 유용한 단축기 정보
- alt Ctrl의 역할을 한다. 한번에 다 잡고싶으면 alt를 눌러보자
- Ctrl + d
- 2<sup>5</sup> 아래와 같이 <sup>태그를 동시에 수정하고 싶다면 하나의 sup에 블럭을 씌우고 Ctrl+d를 누르면 동시에 수정된다.
- html에서 !를 치고 엔터를 누르면 기본 틀이 자동으로 입력된다
- <head>에서 css를 연결시켜줄때 link:css만 입력하면 자동으로 태그가 입력되어 연결된다.
'2023 하계 모각코' 카테고리의 다른 글
| 2023.07.31 모각코 5회차 결과 (0) | 2023.08.04 |
|---|---|
| 2023.07.31 모각코 5회차 목표 (0) | 2023.08.04 |
| 2023.07.25 모각코 4회차 목표 (0) | 2023.07.26 |
| 2023.07.20 모각코 3회차 결과 (0) | 2023.07.22 |
| 2023.07.20 모각표 3회차 목표 (0) | 2023.07.22 |
