TIL 12 | 생활코딩 WEB2 - CSS

22888 단어 TILCSS생활코딩CSS

CSS가 필요한 이유

HTML의 목적은 정보 전달이다. style을 지정하기 위해 html 코드마다 style을 지정하게 되면 비효율적이고, 하나의 코드가 복잡해보이게 된다. HTML이 정보전달 역할을 제대로 하게 하기 위해, 효율성을 위해, CSS언어를 사용하게 되었다.

CSS

CSS를 넣는 방법으로 1)<style>태그를 사용하는 방법과 2)style속성을 쓰는 방법이 있다.

<!--<style>태그를 사용하는 방법-->
<style>
	a {
		color:red;
		text-decoration: none;
	};
    </style>
  //a : 선택자selector, color:red: declaration, color:property, red: value
  • 선택자(Selector) : CSS효과를 적용해 줄 대상을 가리켜 선택, 위에서 a{ ~~ }
  • 효과(Declaration) : 선택자에 적용되어 나타나게 될 CSS효과를 CSS문법을 통해 표현한 것, 위에서 color:red; 등

    효과(declaration)는 여러 개를 선언하고 지정해줄 수 있다. 세미콜론( ; )으로 구분하고 순서는 상관 없다.

선택자

class

class는 여러개 사용할 수 있고 띄어쓰기를 통해 구분한다. class에 스타일 지정하려면 .class명 해주면 된다. 

<head>
    <title>AboutMe✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        .saw{
            color:gray;
        }
        .active{
            color:red;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="1.html" class="saw">AboutMe</a></li>  
        <li><a href="2.html" class="saw active">Favorites</a></li>  
  	</ul>
</body>

id

class에서 살펴본 코드에는 중복이 있기 때문에 좋은 코드라고 할 수 없다. 이럴 때 id를 사용할 수 있다. id는 중복이 되지 않는다는 특징이 있다. 스타일 지정은 #id명으로 한다.

<head>
  <style>
    #active {
      color : black;
    }
  </style>
</head>
<body>
	<li><a href="2.html" class="saw " id ="active">Favorites</a></li>
</body>

tag

같은 태그에 스타일을 한 번에 지정할 수 있다. 

<style>
  a {
 	color : pink;
  }
</style>

box model

박스를 만들고 싶다면 border스타일을 지정하면 된다. 

<!doctype html>
<html>
<head>
    <title>Favorites✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        h1{
            border-witdth: 5px;
            border-color: red;
            border-style: solid;
        }
        a{
            border-witdth: 5px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
  <h1>blabalbalb</h1>
  <a href="https://www.google.com/">구글이다구글이다~~~</a>
</body>

h1은 block lever element이고, a는 inline element이다. 이는 display: 로 수정도 가능하다.

h1{
	border-witdth: 5px;
	border-color: red;
	border-style: solid;
	display:inline;
}
a{
	border-witdth: 5px;
	border-color: red;
	border-style: solid;
	display:block;
}

중복을 피하기 위해 아래와 같이 작성해주는 것이 좋다. 

h1, a{
	border: 5px solid red;
}

padding & margin


마우스 우클릭 -> 검사(mac)로 가서 확인하며 조금씩 수정하자.

grid

아무 의미 없는 element
div: block
span: inline

<head>
    <title>Favorites✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        #grid{
            border:5px solid pink;
            display:grid;
            grid-template-columns: 150px 1fr;
        }
        div{
            border:5px solid gray;
        }
    </style>
</head>

<body>
    <div id="grid">
        <div>Navigation </div>
        <div>Article</div>
    </div>
   
</body>

반응형 디자인

media queries로 간단하게 반응형 디자인을 만들어보자. width가 800px을 넘으면 display에 아무 것도 없도록 작성했다.

<head>
    <title>Favorites✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        div{
            border:10px solid green;
            font-size:60px;
        }
        @media(min-width:800px){
            div{
                display:none;
            } 
        }
        
    </style>
</head>

<body>
    <div>
       responsive
    </div>
   
</body>

css 효율적으로 적용하기

CSS를 html 파일 마다 작성하고 수정하려면 번거롭다. CSS파일을 작성해서 HTML에서 link로 연결하면 편리하다.

<head>  
	<link rel="sttylesheet" href="">
</head>
java-ngrok - ngrok용 자바 래퍼
다시 잠금 및 비재잠금

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage