1. 학습내용
오늘은 일반적인 웹페이지의 html 태그 구성을 나열해보고, CSS에 대해 조금 배워보았다.
html부분은 대부분 저번 내용을 복습하는 부분이라 여기에는 CSS에 대해 적어보려 한다.
<title>Document</title>
<!--캐스케이딩: 위에서 아래로 흐른다.
같은 태그에 여러가지 스타일시트가 적용될 때
스타일이 하나의 태그에 서로 다른 CSS값을 적용하다 보면
충돌 발생하기도 함-->
<style>
p{
color: brown; font-size: 12px;
}
</style>
</head>
<body>
<p style="font-size: 25px;">동시에 적용</p>
<p>다르게 적용된다.</p>
</body> <title>Document</title>
<!--오버라이딩(overriding) : 덮어쓰기
동일한 CSS 프로퍼티에 서로 다른 값을 설정하는 충돌시
우선순위가 높은 스타일을 적용하는 규칙
[기준]
1) 스타일 우선순위(importance, Specificity, order)
:(제일 중요)사용자 스타일 시트: ex. 고대비
:!important - 어떤 스타일보다 우선 적용
:일단 스타일시트
:기본 브라우저 스타일:
(우선순위)
(높음)inline > id > class > tag
2) 스타일 상속
-->
<style>
p{
background-color: red !important;
}
.myclass{
background-color: gray;
}
#myid{
background-color: slateblue;
}
h2{
color: brown;
}
h2{
color: aquamarine;
}
</style>
</head>
<body>
<p>스타일우선순위</p>
<p class="myclass">!important</p>
<p id="myid">일반 스타일시트</p>
<p class="myclass">우선순위를 작성해보자.</p>
<!--p id="myid">id를 중복사용해보자</p--><!--잘못된 사용법-->
<h2>스타일 적용 우선순위</h2>
</body>2. 어려웠던 점 및 해결방안
새롭게 알게된 내용은 아래와 같다.
계속 예전부터 클래스 명만 다르게 적어 스타일을 달리 주었는데, 부모태그 아래 클래스 명을 부여하고, 스타일을 적용해 주면 그부분만 다르게 적용될 수 있다는 사실을 새로이 알게 되었다.
<style>
*{font-size: 40px;}
h3, li{color: blue;}
li{font-size: 20px;}
body.main{background-color: aliceblue;}
div.notice{color: red;}
div ul#list{background-color: mistyrose;}
div > strong{color: dodgerblue;} /*자식*/
div > ul > li > strong {color: dodgerblue;} /*자식*/
body strong{color: aquamarine;} /*자손*/
</style>
</head>
<body class="main">
<h3><strong>web</strong> proframming</h3>
<hr>
<div>
<div>5월<strong>학습내용</strong></div>
<ul id="list">
<li class="notice">HTML</li>
<li><strong>CSS</strong></li>
<li>Javascript</li>
</ul>
<div class="notice">월~금: 10시 ~1시</div>
</div>
</body>위에 li태그 밑에 클래스 명과, div 의 클래스 명이 동일하고, div아래 클래스에만 다른 스타일을 적용시켜 주고 싶을 때. 그럴때 '부모태그.클래스명{}' 을 적어주어 스타일을 적용시킨다.
3. 학습 소감
본격적으로 CSS를 배우게 되었다. 다시 복습해서 더 잘알게 된 것도 있고, 알고는 있었지만 그것에 대한 정의에 대해서도 알 수 있었던 하루였다.
친숙한 개발자가 되고픈 사람