2023.07.13 모각코 1회차 결과

1. VScode에서 html을 작성해 웹에 표기하는 방법

제목 태그인 'h1'과 글씨체를 진하게 해주는 'strong', 그리고 밑줄을 그어주는 'u'태그를 사용해 나타낸 모습이다.

아직은 태그를 자유자재로 다루지는 못하는 상태다.

 

HTML의 태그는 총 150개 정도이며 실제 웹사이트에서는 평균적으로 25정도 사용된다고 한다. 

 

모르는 태그 있을 때는 검색해서 찾아보는 습관 들이기

 

2. br태그와 p태그

vscode에서 줄바꿈을 했음에도 웹에서는 적용되지 않는다.

여기서 'br' 태그를 이용한다.

다음과 같이 br 태그를 두 번 사용해주면

단락 구분이 정상적으로 이루어진 것을 볼 수 있다.

 

하지만 'p' 태그를 이용하면 어디서부터 어디까지가 한 단락인지를 표현할 수 있기 때문에 br보다는 활용도가 조금 더 높다고 할 수 있다. 그리고 br과는 달리 닫히는 태그 </p>가 있다.

p태그를 사용해도 정상적으로 단락이 구분되는 것을 볼 수 있다.

=> br태그와 p태그의 비교

br태그는 줄바꿈을 하고싶은 만큼 br태그를 쓰면 되기 때문에 p태그에 비해 자유도가 높다.

 

하지만 css를 활용하여 줄 간격을 띄울 수 있기 때문에 실제로는 p태그가 더 많이 사용된다.

 

3. img 태그

'img' 태그는 src의 주소에 해당하는 이미지를 불러와 표현이 가능하게 해주는 태그이다.

coding.jpg에 해당하는 파일이 정상적으로 들어간 것을 볼 수 있다.

 

위 이미지의 크기가 너무 커서 보기 불편하므로 width를 100%에 맞춰주면 잘 나온다.

 

4. 속성

img 태그를 이용해 속성이라는 문법을 간략하게 정리해보자

<img src="coding.jpg" width="100%">

태그가 태그의 이름만으로는 부족할 때 위처럼 속성(attribute)을 사용한다.

 

5. ul태그와 ol태그

'ul' 태그는 순서가 없는 리스트를 정의할 때 사용한다.

<parent>
	<child>
	</child>
</parent>

위와 같이 부모 자식 관계를 가진다고 할 수 있다.

'ol' 태그는 해당 항목들의 순서를 매겨준다.

 

6. a 태그

'a' 태그는 주소를 걸어주는 태그이다.

a 태그의 속성을 보자

href : 해당 주소로 이동

target="_blank" : 새 탭에서 해당 링크가 열리게 함(작성하지 않으면 해당 탭에서 열림)

title="html5 specification" : 마우스 커서를 올리면 "html5 specification"이라는 제목의 툴팁이 뜬다.