CSS란

메모용/웹 2017.06.11 12:32

- 무료 강의사이트인 생활코딩(https://opentutorials.org/course/1) 강의를 보고 메모 및 정리를 한 글입니다. -




CSS란? (Cascading Style Sheeting)

'디자인을 위한 언어' 이다.


기존에는 HTML 태그의 속성을 이용하여 웹 디자인을 하였으나 HTML은 정보를 위한 언어로서 본연의 기능에 충실하도록 하고, CSS에게 디자인 부분을 넘김



CSS는 단독으로 사용하지 않고 HTML과 함께 사용한다.

CSS를 사용하기 위해서 HTML문서 내에 <style> 태그를 사용하면 된다.


CSS 문법


<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

   <style>

     h1{color:red}

   </style>

</head>

<body>

<h1>CSS</h1>

<h2>JavaScript</h2>

<h3>HTML</h3>

<h1>PHP</h1>

</body>

</html>


이러한 html 문서가 존재할때

style 태그 내의 h1{color:red} 의 뜻은 'h1 태그의 색깔을 빨간색으로 설정한다'라는 뜻을 가진다.


또한 h1 부분을 선택자(selector) 라고 부르고 주어 역할이 된다.

꺽쇠 안의 부분은 서술(description) 이라고 부른다.


만약 h2 태그도 함께 스타일을 적용하고 싶다면 아래처럼 쉼표를 이용하면 된다.

     h1, h2{color:red} 


그런데 body 내에 

 <ul>

  <li>html</li>

  <li>css</li>

  <li>javascript</li>

 </ul>

아래와 같은 태그가 있고 li 태그가 들어간 css 부분만 스타일을 적용하고 싶다면 어떻게 하면 될까?



li {border: red 1px solid;} 라는 스타일을 적용한다면 ('테두리를 빨간색 1px 선으로 칠한다'라는 뜻을 가진다. 그리고 이러한 border 속성의 값들은 순서가 바뀌어도 상관이 없다.)

사용하고 있는 리스트 태그 전체가 스타일이 적용이 되어버린다.


이럴때는 li 태그의 id 속성을 이용하면 된다.

 <ul>

  <li>html</li>

  <li id="selected">css</li>

  <li id="extra">javascript</li>

 </ul>


style 내에 

selected { ... } 의 경우 태그를 의미하는 선택자가 되어버리기 때문에 id를 가리키려면 앞에 # 이라는 문자를 덧붙이면 된다.

  #selected{

   border: red 1px solid;

   padding:30px;

   margin: 50px;  

  }

  #extra{

   border:blue 1px solid;

  }


결과:



  • html
  • css
  • javascript


저작자 표시 비영리
신고

'메모용 > ' 카테고리의 다른 글

CSS란  (0) 2017.06.11
웹 개발도구 종류  (0) 2017.06.11
w3schools 웹 프로그래밍 레퍼런스 사이트  (0) 2014.05.12
블로그 이미지

콩 lee하이

거대한 콩입니다.