개발자 데뷔!

04. [FE] CSS 기본 본문

웹/Front End

04. [FE] CSS 기본

물꼮이 2022. 1. 12. 22:15

CSS

CSS :  Cascading Style Sheets

 

: 마크업 언어가 실제 표시되는 방법을 기술하는 '스타일 언어'(style sheet language)

  레이아웃, 스타일 (ex_ 컬러, 폰트) 등을 정의한다. 

  HTML, XHTML에 주로 쓰인다.  (+ XML)

 

'마크업 언어' ex: HTML 로 웹사이트의 개략적인 몸체를 구성하고, 
'스타일 언어' ex: CSS로 웹사이트 각각의 구성요소를 디자인한다고 생각하면 된다. 

 

 

css 속성값이 궁금할 경우, css교과서와 같은 다음 링크에서 검색해 자세한 내용을 찾아볼 수 있다.

[MDN (CSS사전)]  https://developer.mozilla.org/ko/

CSS 기본구조

다음 기본구조를 Declaration(선언)이라 하며,

선택자(selector) 뒤의 대괄호 { } 내에 속성값을 차례로 지정하는 형태를 띈다.

Declaration)

선택자 {
    속성: 속성값;
}

ex)

p{
	color: red;
}

 

 

CSS 실습 

 CSS 코드는 다음 html 기본 코드에서,   {지난 글 HTML 기본 참고}

.html 확장자 파일의 <head>태그 내부에

<style> 태그를 새로 생성하여 작성한다.  

<!DOCTYPE html>

<html lang="en">
	<head>
    		<meta charset="UTF-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>Document</title>
        
       		<style>
            		<!-- css 내용 작성 -->
            	</style>       
	</head>
    
    
	<body>   
    		<!-- body에 들어갈 내용 -->       
	</body>
    
</html>

 

css 주석처리

 다음과 같이, <style>태그 안의 css 영역에서는, /*   */ 로 주석처리를 한다.

<head>
	<style>
    	/* css 주석처리 */
    </style>
</head>

 

CSS 동작구조

  • 폰트, 색상, 스타일 등에 관한 정보를 <head>-<style>태그에서 선언(declaration) 하여 지정할 수 있다. 
  • 선언으로 정의된 스타일은, <body>태그 의 element들에게 속성값으로 전달되어 입혀진다.
  • 스타일을 전달하는 속성으로는, 크게 id, class 가 있다.
  • element의 속성값과, css선언명을 같은 문자로 설정해 css와 element를 연결할 수 있다. 
  • 물론 태그명 자체를 css선언명으로 바로 선언할 수도 있다. (사용 지양)
  • ex) body{  color:black  }, a{  color:blue  };
  • 한 태그에 class 를 여러개 지정할 수 있다.
  • ex) <div class= "st1 st2"> test </div>
속성 id class
특징 - 중복사용 불가능 x
- 고유한(identifier) 스타일을 지정할 때 사용
- 최대한 사용 지양
- ex) 주민번호		 - 중복사용 가능o
- 스타일을 한번 지정해놓고,
  여러 element에 속성값으로 줄때 사용
- ex) 반
<style>에서 선언 - 제일 앞에 # 을 붙임 - 제일 앞에 . 을 붙임
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	h1{
        	color:orange;
        }
        #test1{
            background: red;
        }
        .test2{
            background: yellow;
        }
    </style>
</head>
<body>
	<h1>태그에 직접 선언</h1>
    <div id="test1">test1</div>
    <div class="test2">test2</div>
</body>
</html>

 

일반적인 언어는, 코드를 (위에서아래로, 좌에서 우로) 차례로 분석하고 실행하는데,
css만이 그렇지 않다. 더 아래쪽에 쓰인 코드, (즉, 최신의 코드)로 덮어씌우기(= 중첩 Cascading) 가 가능하다. 
즉, 이미 선언한 style속성을, 한번 더 같은 이름으로 선언하면, 더 아래쪽에 있는 코드가 높은 우선순위로 반영된다.

 

CSS상속

 css에서는 기본적으로, 부모태그의 속성(css)은 모두 자식태그에게 상속된다.

 <ul>을 스타일 선언한다면, <ul>내부의 콘텐츠로 존재하는 <li>에도 모두 같은 스타일이 입혀질 것이다. 

 다음 코드에서는, 그냥 <li>, <a>태그와 <a>태그를 자식으로 갖고있는 <li>태그 세가지를 비교해보았는데,

 "특정 태그에 상속된 태그" 를 가리키고 싶다면, css에서 태그 > 태그 같은 방식으로 지정할 수 있다.

ex) li >a {
     color:blue;
   }     

  : 'li태그에 속한' a태그에만 스타일을 적용한다는 의미 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	li{
        	color:black;
        }
        a{
        	color:orange;
        }
        li > a{
        	color:blue;
        }
    </style>
</head>
<body>
	<ul>
  		<li>black</li>
        	<li>what<a href="#">blue</a></li>
        	<a href="#">orange</a>
    
    </ul>
</body>
</html>

 

CSS우선순위 

css에선 다양한 방법으로 스타일을 지정할 수 있어서 다음과 같은 우선순위로 적용된다.

  1. 속성 값 뒤에 !important 를 붙인 속성
  2. HTML에서 style을 직접 지정한 속성
  3. #id 로 지정한 속성
  4. .클래스, :추상클래스 로 지정한 속성
  5. 태그이름 으로 지정한 속성
  6. 상위 객체에 의해 상속된 속성

ex) 

  1. color:black !important
  2. <li style="color:black;"> text</li>
  3. ..........

CSS 속성 종류

속성 역할 사용 특징
width 넓이 width: 100px;  
height 높이 height: 100px;  
font-size 글자크기 font-size: 50px;  
color 색깔 color: green;  
background 배경색 background: black; - background: #ee2244;
같은 방식으로 특정색 지정해서 넣을 수 있음
background-image 배경이미지삽입 background-image: url("./cat.jpg"); - 사진이 콘텐츠 크기보다 작으면 사진이 반복됨
- background-repeat: no-repeat; 속성을 추가해 이를 방지할 수 있음
- background-size : cover; 속성으로, 콘텐츠 크기에 이미지 해상도를 맞추어 표시할 수 있음
background-color 배경색 background-color : black;  
       
padding 안쪽여백 padding: 20px; - 여백에는 색을 입힐 수 없다.
border 외곽선 border: 3px solid black;  
margin 외곽 여백 margin: 20px; - 상하좌우 모든 margin을 한꺼번에 주는 것 = '단축속성'
- margin-top, margin-bottom 등으로 나눠서 여백을 부여할 수 있다.
- 또는 margin: 50px 10px;
로 {상/하 좌/우} 두가지로 나누어 여백을 주는 방법도 있다. 
- margin: auto; 와 같이  숫자대신 auto로 적절히 정렬할 수 있음
- 블록요소의 가운데정렬은 margin 0 auto;
-padding, margin, border도 마찬가지
text-align 글씨 정렬 text-align : center; - text= 인라인 요소
- '인라인'요소를 가운데 정렬할 때는 '부모'요소에 text-align: center;
       
       

 

* 모든 속성은 '콘텐츠'의 크기가 기준이 되어 입혀짐

 

ex) margin 정렬 예시 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	div{
            width:200px;
            height:200px;
            border: solid 3px;
        }
        .a{
            margin-left: auto; 
        }
        .b{
            margin: 0px auto;
        }
        .c{
            margin-right:auto;
        }
    </style>
</head>
<body>
	<div class="a">aa</div>
	<div class="b">bb</div>
	<div class="c">cc</div>
</body>
</html>

 

 

ResetCSS

: 사이트마다 기본 설정된 여백, 패딩 값 등이 달라, CSS가 왜곡 될 수 있기 때문에, 

  이를 모두 같게 설정(초기화)해주는 코드(기술)

 

'웹 > Front End' 카테고리의 다른 글

02. [FE] 브라우저에서 개발자도구 열기  (0) 2022.01.15
06. [FE] CSS Display 디스플레이 요소  (0) 2022.01.12
03. [FE] HTML 기본  (0) 2022.01.12
01. [FE] VS code 기본 & 시작하기  (0) 2022.01.12
00. [FE] 웹기술  (0) 2022.01.12
'웹/Front End' Related Articles more