[HTML CSS] Source Lake

1. CSS 적용 

: HTML로 뼈대를 잡았다면 꾸며주기 위해선 CSS가 필요하다. 

 

뼈대를 꾸미는 방법은 크게 2가지로 나뉘는데, 

1. 인라인 스타일

2. Style태그 속 css문법

을 통해 꾸며줄 수 있다. 

 

인라인 스타일은 비교적 직관적으로 바로 꾸며주기는 하지만 코드가 많아질 경우 일일히 수정해야하는 불편함이 있어 비효율적인 방법이다.

따라서 css문법을  통해 이 뼈대를 꾸며주는 것이 중요하다. 

 

그리고 이 뼈대를 꾸며줄 때 뼈대가 무엇인지에 따라 당연히 css 문법 또한 달라진다. 

크게 뼈대는 태그(tag), 클래스(class), 아이디(id)가 있다. 

p {
  font-size: 12px;
}
/* 1. 태그에 대한 꾸며줌*/

.profile {
  font-size: 12px;
}
/* 2. 클래스 profile 에 대한 꾸며줌*/

#check {
  font-size: 12px;
}
/* 3. 아이디 check 에 대한 꾸며줌*/

 

2. CSS 기본문법 

이제 뼈대를 알았다면 제대로 css 문법을 통해 뼈대를 꾸며보자 . 

1) 폰트스타일 

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

해석해보자. 

아이디 타이틀이란 뼈대에서 

폰트 스타일을 Georgia로 하고 없으면

"Times New Roman" 로 하고 없으면

Times 로 하고 없으면

serif로 해란 뜻이다. 

 

특히나 가끔 폰트스타일에는 기본값이 따옴표가 포함되어있는 것도 있다. 주의하면서 폰트사이즈 설정하자. 

 

2) 폰트를 기울이고 싶다면?

#title {
  font-stlye: italic ;
}

글자색을 바꾸고 싶다면 밑에 처럼 3가지 예시가 있다.

#title {
  color: yellow;
  color: #eb4639 ;
  color: rgb(xxx,xxx,xxx); 
  color: hsl(x, xx%, xx%);
}

1. 색상명 (대부분 이걸 사용한다. 검은색 아니면 흰색을 주로 사용하기때문에)

2. # 을 hex색상코드라고 한다.

3. rgb값을 사용

4. hsl로 색상, 채도 명도를 표현한다. ex) hsl(4, 82% 57%) 색상은 4 채도는 밝게 명도는 중간인 색이다. 

 

3) 글자 크기를 바꾸고 싶다면? 

#title {
	font-size : 10px;
    }

 

4) 그외에도 글자를 정렬하기 편한 css가 존재한다. 

#title {
	text-align: left;
    	text-align: center;
    	text-align: right;
    }

3. Margin과 Padding

margin은 테두리 밖에서 여백을 뜻한다.  여러 박스나 사진들이 있다면 여백을 사용하기 위해 사용한다. 

padding은 테두리 안에서의 영역을 말한다. 인스타그램을 보게 되면 가끔 여백있게 설정된 사진들이 보이는데 이것이 패딩원리랑 비슷하다. 

border는 padding과 margin 사이의 값으로 생각하면 된다. 

 

예를 들어 padding 값은 그림을 보듯 방향에 따라 값을 취할 수 있는데 

p.example {
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

시계방향으로 위 오른쪽 아래 왼쪽으로 생각해서 코드를 간락하게 할 수 있다.

p.example {
  padding : 10px 20px 30px 40px; 
}

두개로 margin 값을 표현할 수도 있다. 

이때 margin 위아래 좌우 가 된다. 

p.example {
  padding : 10px 20px; 
}

padding 값을 위아래 10px 좌우로 20px을 주라는 것이다.

4. Border (테두리 스타일)

css 문법으로 테두리 스타일도 바꿀 수 있는데 기본값은

span {
  border: 1px dotted #0000ff;
}
          두께 선스타일 색상

선의 스타일로 dotted, dashed, solid, double, groove, ridge, inset, outset 등등 있다. 

보통 solid (실선)를 이용하여 레이아웃 설정공간이나 텍스트를 꾸미는 것을 커스텀할 수 있어서 좋다. 

 

p {
	text-decoration: underline;
}

출력결과 :  내용~~~~~~~ 

 

 

이때, border-bottom을 써서 보다 자유롭게 밑줄부분을 커스텀할 수 있다는 것이 css의 장점이다. 

 

5. Box-sizing 

: padding값을 계산해야한다는 번거로움을 해결한 CSS Property

 

padding 값으로 인해 2번재 가로 길이가 똑같은 300px 임에도 불구하고

실제 총 가로거리는 420px로 나타났다.(300+50+50+10+10)

매우 거슬리는 상황이다. 이때 필요한 것은 box-sizing 프로퍼티! 

 

원리는 간단하다. 

우선 보이는 대로 width 값을 주고 

padding 값을 안쪽만 주는 것! 

 

모든 태그에 적용하고 싶을땐   *  

* {
	box-sizing: border-box;
   }

6. 상속 ( Inheritance ) 

: 자식이기는 부모는 없다! 그렇다면 부모는 누구이고 자식은 누구인가? 

 

이때 부모는 body태그 자식은 그 속에 포함되어 있는 blockquote 태그가 된다. 

body {
  color: red;
  font-size: 14px;
}

blockquote {
  color: black;
}

그렇다면 글자색은 어떨것인가? 

red가 아니고 black으로 적용된다. 

 

7. 그룹( Grouping ) 

: 한꺼번에 적용시키고 싶다 그렇다면 그룹으로 묶어서 처리하자 코드정리할겸! ~~~   ,   ~~~

 

.what-is-blockquote, span {
  color: green;
}

8. CSS selector( 선택자 ) 

: 부모는 하나지만 자식은 여러명일 수 있다. 이때 자식들은 첫째 둘째 막내로 위계질서 존재한다. 

 

우선 기본적인 css 표현방법을 알아보자. 해석이 중요하다. 

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

1.  p 태그 안에 클래스 p-tag 의 글자를 회색으로 바꿔라 

2.  p 태그 안에 아이디 third-line 의 텍스트에 밑줄을 그어라 

 

이처럼 태그나 클래스, 아이디를 결합해서 쓰는 경우가 있다. 보통 두개를 결합해서 쓰고 세개까지 결합하는 것은 너무 세세한 과한 표현이라고 한다. 

 

• CSS Specificity에도 우선순위 있음
• 부모 = 제일 맘 약함 ⇒ tag (1)
• 첫째 = 그나마 맘 약함 ⇒ class (10)
• 둘째 = 그나마 맘 약함 ⇒ id (100)
• 막내 = 내 세상 ⇒ inline styling (1000) = html에 style을 직접 부과한 것을 말함

p { font-size : 30px }

.p-tag{ font-size: 15px} 

태그와 클래스의 싸움 ⇒ 자식 이기는 것 부모 없다.

 

9. 이미지 (직접 넣기 VS Background 영역에 추가하기)  

: img 태그 속성관리는 html이 아닌 css에서 관리하는 것이 효율적이다. 

: 이미지를 가공할 필요성이 있다 -> 직접넣거나 css에 링크추가하기 .

: 가공할 필요가 없다 -> Background 영역에 이미지 추가하기 

 

기본 포맷. 여기서 alt는 이미지에 대한 설명이다. 

<img src = "xxxxxxxxx" > 

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

이때 이미지 크기를 줄이고 싶다면 css width를 추가하면 된다. 어차피 높이는 가로에 맞게 세팅이 된다. 

 

다른방법으로, background 영역에 이미지를 추가하는 방식으로도 할 수 있다. 

즉, css속성으로도 이미지 삽입이 가능하다.

 

우선 기본적인 원리는 이렇다.

이미지 들어갈 공간 세팅 → 가로,세로 길이결정 → 백그라운 사이즈를 100%로 설정해서 결정된 가로세로에 맞게 세팅.

기본 css문법은 background-image: url("~~~~") 이다.

<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");
}