생활코딩(WEB1 - HTML & Internet 최후의 문법 속성과 img까지)

※ 생활코딩님 강의를 듣고 중요한 내용을 정리하는곳

태그(tag)

<strong>New York</strong>

여기서 앞뒤에 붙어 있는 것들을 태그 라고 하고 앞에가 열리는 태그 뒤에가 닫히는 태그 라고 하는데 닫히는 태그는 앞에 열리는 태그와 구분하기 위해 슬래시를 붙여줍니다.

그리고 여기서 <strong>태그는 글씨를 진하게 해줍니다 New York 이런식으로 New York 여기서 New를 밑줄을 긋고 싶다면 <u> 태그를 써줍니다 여기서 u는 underline 할때 u 입니다.

<strong><u>New</u> York</strong>

그러면 New York 이렇게 됩니다 그리고 제목을 나타내는 태그들이 있는데 <h1> ~ <h6> 까지 있습니다 

이 태그들을 이용하면 위에 <strong> 태그 처럼 글씨가 진해지고 커지는데 h뒤에 숫자가 작아 질수록 글자 크기가 커집니다.

<h1>League of Legends</h1>

이런식으로 사용합니다

그리고 웹사이트에 내용이 많아지면 띄어쓰기를 해서 글의 가독성을 높이는데 이때 사용하는 태그들이 있는데 

<br> 태그와 <p> 태그 입니다.

<br>라이엇 게임즈가 개발 및 서비스 중인 MOBA 장르의 게임
<p>32비트 게임인 주제에 램을 엄청나게 퍼먹기 때문에, 램 4GB로는 32비트 윈도우든 64비트 윈도우든 
시스템에 굉장히 부담이 많이 걸리며 정상적인 장시간 플레이가 어렵다.</p>
<!-- 나무위키에서 퍼옴 -->

근데 둘이 다른점이 있다면 일단 <br> 태그는 닫히는 태그가 없다는 점이고 그냥 단순히 줄바꿈만 해주고 <br> 태그를 여러번 쓰면 그만큼 줄바꿈도 늘어난다  

<p> 태그는 여기서 부터 여기 까지가 같은 단락이다 라는 것을 표현 할 수가 있다 여기서 p는 paragraph에 p이다 

단락이라는 뜻이다. <p> 태그를 통해 정해진 여백을 늘이거나 줄이고 싶을때는 CSS를 이용하면 되는데 이건 나중에 CSS 배을때 쓰겠지? ( ex) style = "margin-top : 40px;" 이런식으로 사용한다고 한다. )

 

속성 (Attribute)

태그가 태그의 이름만으로 정보가 부족할때 속성을 이용해서 더 많은 의미를 부여 할수 있다

이미지를 웹페이지의 포함시킬때 사용하는 태그이름은 <img>(닫히는 태그 안씀) 근데 이 태그만 쓰면 당연하게도 화면에 아무것도 나오지 않는다 여기서 속성을 이용을 하는데 

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

src="league.jpg" width="100%" 이 부분을 속성 이라고 하고 위치는 상관이 없다 width="100%" src="league.jpg" 이렇게 해도 의미는 같음 src 는 source에서 나온말이고 league.jpg 이건 파일 주소이다 width="100%" 는 이미지 파일 크기를 조절하는 부분이다