HTML & CSS (1) _TIL WECODE 1st day.

Jivyy·2020년 4월 21일

WECODE

목록 보기

2/20

HTML TAGS

<span></span> : 줄바꿈 없이 한 줄에 이어서 나옴(inline-element)
<p></p> : 줄바꿈 없이 한 줄에 이어서 나옴(inline-element)
<a></a> : 태그 내 href속성으로 다른 페이지로 이동하는 하이퍼링크를 삽입 시 사용
<div></div> : 자체적인 의미는 없으나 유사한 부분끼리 그룹짓거나, 
  디자인에 맞게 레이아웃을 분리하고, class나 id를 주어 CSS스타일을 입히기 위해 사용

HTML Attributes

id : 태그에 이름을 부여하는 속성, 고유한 값을 가지므로 중복된 값 사용할 수 없음
class : id와 비슷하나 여러 태그에 중복된 이름을 부여할 수 있음

NOTE

<div id="profile" class="content-wrap"></div>
<img src="./hi.png" alt="내사진" >
하나의 태그에 여러 속성을 주고 싶으면 한칸 띄운 뒤 작성

CSS

css 적용

css파일에 작성하는 것

<link href="index.css" rel="stylesheet" type="text/css"/>

css 작성법

tag : 상기과 같이 태그 이름을 바로 작성한다.
class : 앞에.(dot)을 추가하여 작성한다.

 .classname{
 }

id : 앞에 #을 추가하여 작성한다.

Font Family

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

NOTE
브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하고,
만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을,
이것도 없으면 Times, 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 의미
폰트 이름에 띄워쓰기가 되어있으면 ""를 사용

Font Color

hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)

텍스트 정렬

NOTE
span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았다.
span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문.

Indent

.class{
  text-indent: 50px;
 } 
 :문장 앞 들여쓰기
 
 <blockquote></blockquote> 
 : 인용구문 넣기/양쪽 여백
 
 &nbsp;
 :스페이스

Margin & Padding

개요

주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽 모두 50px
노란색은 border 영역, 보더의 두께는 5px
초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽 모두 50px
요소의 가로는 273px, 세로는 90px
p.example {
  width: 273px;
  height: 90px;
  margin: 50px;
  border: 5px solid black;
  padding: 50px;

Margin

p.class {
margin: 50px;
}

를 풀어 쓰면 아래와 같고
(순서대로 위,오른쪽,아래,왼쪽)

p.class {
margin: 50px 50px 50px 50px;
}  

이는 아래와도 동일한 의미를 가진다.

p.class {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;  
}

Padding

Border

p {
  border: 5px solid red;
  }
  선두께, 선스타일, 선색깔 순으로 작성

p {
  border-top: 4px double red;
  border-right: 2px solid #666666;
  border-bottom: 6px dashed darkviolet;
  border-left: 1px dotted #00ee44;
  }
  다양한 스타일을 줄 수도 있음

Box Sizing

width를 동일하게 설정하고도 padding이나 border 때문에 사이즈가 달라지는 경우가 발생
->보이는대로 width를 주고 그 안쪽으로 padding 을 주는 것이 쉬운 방법.

.class {
  box-sizing: border-box;
}

대부분의 웹페이지에 이런 box-sizing 프로퍼티가 기본적으로 적용되야 하므로 아래와 같이 모든 태그에 적용하도록 한다.

NOTE

* {
  box-sizing: border-box;
}

상속(Inheritance)

부모의 속성이 있어도 본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용된다.

그룹(Grouping)

.what-is-blockquote, span {
  color: green;
}
 여러 태그, 클래스에 같은 스타일을 적용하고 싶은 경우 
  이과 같이 함께 지정할 수 있다.

CSS Selector

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}
  와 같이 태그 & 클래스, 태그 & id 의 조합이 가능하고,
  
  
 .pre span {
  background-color: yellow;
} 
 selector가 스페이스로 띄워져 있는 경우는 모든 <span>이 아니라 
 pre 클래스 내부에 있는 <span>에만 적용된다는 뜻이다.

NOTE
중복 적용될 경우
Selector의 우선순위
tag< class< id< inline css 

Image

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">
처럼 <img>태그를 이용하는 방법과

<div class="bg-img">배경이미지</div>
.class {
background-color: yellow;
background-image: url("https://www.w3schools.com/whatis/img_js.png");
}
처럼 class를 지정하여 css에서 background 이미지를 삽입하는 방법이 있다.
여기서 '배경이미지'라는 글자를 삭제하면 첫번째 방법과 동일한 결과가 나타난다.

Block & Inline

.class {
  display: inline-block;
}
.class {
  float: left;
}
.class {
  float: right;
}
  block 요소를 가지고 있는 태그도 css를 사용하여 inline으로 성질 변경이 가능하고,
  마찬가지로 하기와 같이 inline 에서 block으로도 변경이 가능하다.
  
.block-span {
  display: block;
}

.hide {
  display: none;
}
  를 이용하여 해당 클래스를 제거하는 것도 가능하다 
  -> 검색창 등에서 사용

Jivyy

나만의 속도로

이전 포스트

HTML & CSS (2) TIL

다음 포스트