1주일이 천천히 갈 줄 알았는데 어느덧 2주 차가 되었다.
기초 위주로 배우고 있지만 제대로 공부하고 있는지 모르겠다.
기초가 제일 중요하다고 하는데 뭔가 지나치는 부분이 있을까 봐 살짝 불안하다.
CSS는 어렵지만, 과제가 재밌다. 직접 디자인이 바뀌는 걸 실시간으로 확인할 수 있어서
시간도 빨리 가고 지루한 느낌이 들지 않았다.
아직 기초밖에 배우지 않았지만, 이것도 기초를 탄탄히 해야 다음 과정도 수월하게 넘어갈 수
있을 듯싶다.
CSS는 Cascading Style Sheets의 약자로, HTML, XHTML, XML같은
문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.
CSS 파일을 HTML 파일에 연결할 때에는, html문서의 link 태그 안에서 href 속성을 통해 파일을 연결한다.
link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가한다.
href속성에는 파일의 위치를 추가해야 한다.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}
CSS파일 속성 추가는 크게 3가지 방법이 있다.
<link rel="stylesheet" href="index.css" />
html문서의 link 태그 안에서 href 속성을 통해 파일을 연결한다.
link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가한다.
href속성에는 파일의 위치를 추가해야 한다.
<style>
h1 {
color: blue;
}
</style>
html문서의 style 태그 안에서 CSS 속성을 정의한다.
<nav style="background: #eee; color: blue">...</nav>
태그 내부에 style 속성으로 CSS 속성를 정의한다.
h4 {
color: red;
}
h4 태그의 색상을 변경
<h4 id="navigation-title">This is the navigation section.</h4>
#navigation-title {
color: red;
}
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>
.menu-item {
text-decoration: underline;
}
<li class="menu-item selected">Home</li>
.selected {
font-weight: bold;
color: #009999;
}
id | class |
---|---|
#으로 선택 | .으로 선택 |
한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |