HTML 3일차

11433 단어 CSSidclassdivCommenthtml

2021.08.14

<오늘 배운 것>

  1. class
<p class="주고 싶은 이름"> ~~ </p>

스타일 부분에서 .주고 싶은 이름 { } 식으로 지정할 수 있다. 같은 태그를 쓰지만 다르게 표현하고 싶을 때 사용

  1. head
<p id="고유한_값"> ~~ </p>

스타일 부분에서 #고유한_값 { } 식으로 지정할 수 있으며 같은 id를 공유할 수는 없다.

class와 id의 가장 큰 차이점은 class는 다른 태그에서 같은 이름을 공유할 수 있지만 id는 그렇지 않다는 것이다.

  1. div
<div> ~~ </div>

문단을 나눌 때 사용한다. 문단으로 구별하고 싶은 부분을 div 태그로 둘러싸면 되며, class를 지정할 수 있다.

  1. 다양한 style 지정법
    1) 다양한 파일에서 공유하는 style을 외부 css 파일을 만들어 쉽게 지정할 수 있다. 
<head>
	<link href="파일 경로" rel="stylesheet">
</head>

2) 해당 태그 바로 옆에 사용 가능

<p style="color: red; font-size: 60px;"> ~~ </p>
  1. comment 작성법
<!-- 적고 싶은 코멘트-->  //html에서 사용
/* 적고 싶은 코멘트 */  //css에서 사용

ctrl+/ (한 줄) 또는 ctrl+shift+/ (여러 줄)을 눌러 편하게 지정 가능하다.

  1. 적용 예시
<!--html 파일-->
<!DOCTYPE html>
<html>
<head>
  <title>세븐틴</title>
  <meta charset="utf-8">
  <link href="css/css.css" rel="stylesheet">
</head>
<body>

<!--주요내용-->
<h1 id="teamname">
  Seventeen
</h1>

<h2>
  2015년 5월 26일 데뷔한 대한민국의 보이그룹이다.
</h2>
<img src="https://newsimg.hankookilbo.com/cms/articlerelease/2021/06/25/8fe3756d-5439-49e8-abb8-cdb6c07fd420.jpg">
<p class="name_meaning">
  총 <b>13명의 인원</b>으로 이루어져 있으며
 팀 이름의 뜻은 <i>13명+유닛 3개+1개의 그룹</i>이라는 의미이다.
</p>

<!--자세한 설명-->
<p class="recent">
   최근 5번째 팬미팅인 5th carat land를 개최하였으며 6월 18일 "Ready to love"로 컴백을 하기도 했다.
   고잉 세븐틴을 통해 팬이 아닌 대중들에게 예능감을 각인시키도 했다.
   멤버는 에스쿱스, 정한, 조슈아, 준, 호시, 원우, 우지, 디에잇, 민규, 도겸, 승관, 버논, 디노로 
   구성되어 있으며 다수의 인원이 예명을 사용한다.
</p>

<!--나무위키 참고-->
<div class="tree">
 <a href="https://namu.wiki/w/%EC%84%B8%EB%B8%90%ED%8B%B4">나무위키: 세븐틴</a>
 </div>
</body>
</html>
/*css 파일*/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    font-size: 15px;
    text-align: center;
}

.recent {
    color: pink;
}

#teamname {
    font-size: 60px;
    text-align: center;
}

.tree {
    text-align: right;
    font-size: 10px;
}

<후기>

역시 아직은 생소해서 예시 파일 만들 때도 일일히 찾아서 해야하지만 덕질이 ^함유된^ 페이지를 만드니 재밌는 것 같다. 그리고 만든게 바로바로 눈에 보이기도 하고! 다양한 css를 기억해뒀다가 사용하면 좋을 것 같다.

Java 어노테이션
TIL #4 CSS (WEB2-CSS 강의 공부)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage