22.06.20 TIL
- id 태그
id는 태그에 이름을 주는 속성입니다. 주민등록 번호와 같이 한국에 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 합니다. 따라서 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다. 즉, 중복된 id 이름이 있으면 안됩니다.
- 인라인 스타일의 스타일
태그 style 속성에 직접 작성할 수 있습니다.
<h1 style="color: red;">FRONTEND 101</h1>
- 빠르고 편합니다.
- 적용해야할 스타일이 많아지면 코드 가독성이 떨어질 것.
- html 태그와 style코드가 혼재되어 있어 유지보수에도 좋지 않다.
<!-- style이 너무 길어서 안 좋은 코드 -->
<h1 style="color: red; font-size: 30px; background-color: yellow; font-weight: bold;">FRONTEND 101</h1>
- html - css 연결
파일에 작성:
html 파일과 분리하여 css파일에 따로 작성하는 방법입니다.
html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 합니다.
<link href="style.css" rel="stylesheet" type="text/css" />
- link — link태그로 사용할 css파일을 링크해줍니다.
- href — href 속성에 css 파일 경로를 작성합니다.
- type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
- rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.
- font family
font-family는 폰트 스타일을 지정하는 속성입니다.
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}
Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,
- 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
- Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
- 이것도 지원되지 않으면 Times을 적용
- 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
주의) "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.
사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다. 가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.
- font weight
.bold-font {
font-weight: bold;
}
font-weight 는 글씨 두께를 조절하는 property입니다.
- normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.
- 숫자 400과 normal은 같은 두께입니다.
- 숫자 700과 bold는 같은 두께입니다.
- 보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정합니다.
- indent
css text-indent 을 이용하여 들여쓰기 .
.js-description {
text-indent: 50px;
}
- 띄어쓰기
스페이스를 의미하는 을 html에 넣어주면 됩니다.
<p>스페이스 넣는 예제</p>
- css 효과 적용의 우선순위
p.example {
margin: 0
padding: 0
}
p {
margin : 50px 20px 0 10px;
padding: 10px 5px 10px 20px;
}
p.example 의 margin, padding 을 0으로 놔두고 아래 p 셀렉터를 새로 만들어서 css를 주었더니, 0값으로 들어갔다. 더 세부적으로 설렉 될 수록 우선순위가 된다.
- 밑줄 ! 테두리 스타일링
p {
text-decoration: underline;
}
위의 p태그에 밑줄을 쳐주는 스타일입니다.
그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵습니다.
이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.
css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만
내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.
- 아래 margin을 2px로 주세요.
- 아래 테두리 두께는 2px, 실선, 검정색으로 해주세요.
- 아래 추가해주세요.
- box-sizing
* {
box-sizing: border-box;
}
앞으로 강의에서 box-sizing 프로퍼티를 딱히 넣지는 않고 진행하겠습니다.
하지만 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.
width 와 패딩의 관계
box-sizing : border-box 를 하지 않으면,
width 200px 로 해놓았을때 패딩을 50px 주면 250px이 된다.
boder-box 해두면 width200중에 안쪽으로 패딩이 50px 생긴다.
- 태그의 결합
p.p-tag {
color: gray;
}
p#third-line {
text-decoration: underline;
}
첫 번째는 p태그이면서 p-tag 클래스이다.
두 번째는 p태그이면서 third-line 아이디이다.
라는 뜻입니다.
.pre span {
background-color: yellow;
}
그런데 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻입니다.
p {
font-size: 30px;
}
.p-tag {
font-size: 15px;
}
index.html에 보면 .p-tag 클래스를 적용한 요소가 p태그이기 때문에
font-size가 중복 적용되었네요.
브라우저에서는 30px과 15px 중에서 어떤 값을 적용할까요?
selector 표현마다 우선순위가 있습니다.
이 우선순위는 점수 계산으로 이루어집니다.
- inline styling(13줄에 style 요소로 직접): 1000점
- id: 100점
- class: 10점
- tag: 1점
tag <<<<< class <<<< id <<<<<< inline css
- css를 통한 이미지의 생성
<div class="bg-img">배경이미지</div>
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
div태그는 자식태그, 즉 div태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정됩니다.
.bg-img {
height: 300px;
}
.bg-img {
width: 300px;
}
그런데 div.bg-img 크기는 줄었는데 원본 이미지는 줄지 않았습니다.
네! 이미지를 담는 영역인 div.bg-img의 크기만 줄인것이고,
배경이미지의 실제 크기는 원본크기 그대로 이면서
그 중에서 div.bg-img 의 크기(300px*300px)만큼만 보여지는 것입니다.
배경이미지 크기를 div.bg-img 크기만큼 줄이려고 합니다.
해당 배경이미지가 div.bg-img의 가로크기만큼 꽉채워 그려주라는 의미입니다.
.bg-img {
background-size: 100%;
}
- div width
div {
background-color: yellow;
margin-bottom: 20px;
}
.has-width {
width: 150px;
}
block 요소일 때 width 값을 주면 더 이상 늘어나지 않게됩니다.
이 때 margin 에 auto 로 설정하면 요소를 가로 중앙에 오게 할 수 있습니다.
.center {
margin: 20px auto;
}
- list 스타일 없애기
아무 스타일도 넣고 싶지 않다고 <li> 태그만 사용하면 안 됩니다.
목록은 항상 <ul> 이나 <ol> 태그로 감싸야 합니다.
하지만, 이것 또한 저희가 원하는 스타일이 아니므로 CSS를 적용하여
ul {
list-style: none;
}
- Table
목록을 표현했을 때 항상 <ul> or <ol> 과 <li> 의 조합이 필요 했듯이,
테이블을 표현하기 위해서도 여러 태그들의 조합이 필요합니다.
<table>, <thead>, <tbody>, <tr>, <th>, <td> 등이 있습니다.
테이블은 항상 <table> 태그로 감싸져있습니다.
<table> 태그 내에 행도 만들고, 열도 만드는 것입니다.
한 행을 시작할 때는 <tr> 로 시작합니다. tr은 table row의 줄임말입니다.
각각의 셀은 <tr> 태그 내에 <td> 태그를 사용합니다. td는 table data의 줄임말입니다
<table>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tr>
</table>
- input placeholder styling
placeholder 에 회색으로 default color가 입혀졌습니다.
이것을 더 연한색으로 바꿔보려고 합니다.
placeholder 는 attribute인데 css의 selector에 어떻게 표현해 주어야 할까요.
input::placeholder {
color: #bbb;
}
위와 같이 콜론 두개를 붙여서 selector를 만들어줄 수 있습니다.
하지만, attribute를 표현한다고 모두 콜론을 쓰는 것은 아닙니다.
input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면,
아래와 같이 표현합니다.
input[type="text"] {
}
- absolute
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.
어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 됩니다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 됩니다.
p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0;
bottom: 0;
}
태그에 노락색으로 배경을 칠했습니다.
원래 p태그는 block-element이기 때문에 가로크기가 부모 너비만큼 전부 차지해야 하는데,
마치 inline-element처럼 내용의 크기만큼만 너비가 생겼습니다.
이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 됩니다.