본문 바로가기
WEB/이론 정리

[1주차] 실습

by 단월໒꒱ 2021. 7. 10.

1. 기본 문서 만들기

- Hello World!! 문구가 화면에 나타나도록

- <html>, <head>, <body>, <p> 요소만 사용할 것

 

[실행 화면]

 

[실행 코드]

 

[코드 설명]

조건 그대로 사용해야하는 태그들만 사용했다고 생각했는데 지금 보니 title 태그까지 사용한 것을 발견했다.

무심코 문서 제목을 지정해줘야한다는 생각에 넣었는데 다음부터는 조건을 유의해서 봐야겠다.

html, head, body 태그는 기본 문서 구조 틀을 잡는데 사용하였고, p 태그를 통해 나타내고자 하는 내용을 화면에 보이도록 했다.

 

 

2. 간단한 자기 소개

- 간단한 자기 취미 소개

  ㄴ <html>, <head>, <body>, <h2>, <p>, <br> 요소만 사용

- 자신의 취미활동 소개하는 목록 만들기

- 표 만들기

  ㄴ 자신의 시간표

- 자기소개서 만들기

 

[실행 화면]

 

[실행 코드]

 

[코드 설명]

간단한 자기 취미 소개 부분은 조건에서 제시한 태그들만 사용하였다.

목록 만드는 부분에서는 ul 태그를 통해 숫자가 아닌 순서가 없는 모양 목록으로 나타냈다.

표를 이용하여 시간표 만드는 부분에서는 딱히 제한 조건이 없어서 표가 깔끔해 보이도록 하기 위해서 style 태그를 적용시켜주었다.

border-collapse 를 통해 표 테두리가 이중으로 뜨는 것을 하나로 바꿔주고 text-align을 통해 td 태그에 속한 내용을 가운데 정렬했다.

시간표에서 2시간 이상 하는 수업들은 rowspan(세로), colspan(가로)을 통해 병합했고 요일과 시간은 th 태그를 통해 가운데 정렬 + 진하게 나타냈다.

마지막 자기소개서 부분은 간단하게 p 태그와 br 태그를 통해 내용을 나타내주었다.

 

 

'WEB > 이론 정리' 카테고리의 다른 글

[2주차] 실습  (0) 2021.07.18
[2주차] 이론  (0) 2021.07.18
[1주차] 이론  (0) 2021.07.10
[웹프첫] 중간과제 - html 태그 정리  (0) 2021.07.10
[웹프첫] 3주차 따라하기 실습  (0) 2021.04.04

댓글