###### HTML 구조와 활용
오전 수업에서 HTML의 구조와 간략한 활용에 대해 공부했다

위 사진처럼 HTML은 크게 head와 body로 나눌 수 있었다.
이 구조에 따라 어떤 태그를 쓸 것인지를 구분짓지만, 대부분의 태그들은 body 안에서 작성 되었다.
태그의 종류는 너무많기에 외울수 없지만 자주쓰는 태그들은 그리 많지않아서 익숙해지는데 오래걸리지 않았다.
오전 강의를 마치고 Sprint 1에서는 간단한 회원가입 페이지를 만들어보았다.

같은 태그를 반복적으로 사용하다보니 강의를 들을때와는 달리 이 태그가 무슨 기능을 하는지 정확히 알게 되었다.오전에는 웹페이지에서 뼈대와 같은 역할하는 HTML을 사용했다면 오후에는 그 뼈대에 맞는 디자인을 담당하는 CSS를 사용했다.
#### CSS의 활용
강의를 들을때 수월했던것과는 달리 사소한 부분에서 막히는일이 많았다.이름 / 전화번호 / 이메일 을 기입하는 과정에서 자꾸 이모티콘과 글자가 다른줄에 생성되서 좀 지저분하지만 div로 묶어서 작성했다. 그 결과는 아래와 같다.


확실히 div태그로 묶으니 한줄로 나왔다. 아직 잘은 모르지만 이 방법말고 더 깔끔하고 좋은방법이 있을것이라 생각한다. 문제가 몇 가지 더 있었지만 하나를 더 꼽아보자면

싸이월드 오른쪽 상단에 표기되는 글자가 오른쪽으로 이동하지않아서 padding 값을 주어 이동시켰다.
그 결과

이렇게 오른쪽에 위치시킬수 있었다. 분명히 다른방법이 있겠지만, 도저히 모르겠어서 이런식으로 해결하였다.
낯선 OS 인 우분투를 사용하니 더 답답한 부분이 있었지만, 앞으로 차차 적응하며 좀 더 깔끔하고 쉬운방법으로 코딩할 수 있을 것 같다.'Code.camp > Precamp' 카테고리의 다른 글
| 베이스캠프 6일차 (0) | 2022.10.12 |
|---|---|
| 베이스 캠프 5일차 (0) | 2022.10.12 |
| 베이스캠프 4일차 (0) | 2022.10.12 |
| 베이스 캠프 3일차 (0) | 2022.10.12 |
| 베이스 캠프 2일차 (0) | 2022.10.12 |