html-2

두 번째 html 포스팅 시간이 돌아왔다.

지난 시간에는 html의 각 속성별 특징에 대해 대충 알아보았다.

오늘은 스타일시트라는 것에 대해 알아볼 예정이다.

 

스타일 시트란, 내가 html로 전체적인 틀을 잡았다면 그 틀의 각 속성들에 대해 이런저런 색상을 입히거나, 간단한 효과를 주는 역할을 한다.

css는 무엇일까? 위키백과에서 긁어보았다.

캐스캐이딩 스타일시트 라는 말이 눈에 들어온다.

 

우선 아이콘이 예쁘다고 생각한다.

 

두 가지 방법으로 스타일시트를 설정할 수 있다.

첫번째는 html문서 내부의 title 태그 밑에 style태그를 작성해서 지정하는 방법과, html문서 외부에 css파일을 따로 만들어서 그 것을 불러오는 방법 이다.

 

각각 방법은 똑같으니 대충 느낌만 가져온다면..

 

첫 번째 방법 - title태그의 바로 밑에 style태그를 열어 값을 지정한다.

 

 

두 번째 방법 - title태그 밑에 link태그를 작성 후, 내가 따로 작성한 style.css 파일을 불러온다.

 

현장에서는 두 번째 방법을 많이 사용한다고 들었는데, 둘 다 같은 효과를 내는 방법이고, 개인적인 생각으로는 html문서에 style 시트를 작성하면 문서가 너무 길어져 가독성이 떨어져서 파일을 따로 작성하는 것이라 생각한다.

 

스타일시트의 여러 명령어는 각 속성의 가시성 을 나타내는 효과를 주는데, 

사진에 보이는 width 와 height 명령어의 값은 각각 객체의 가로세로값을 500픽셀만큼 지정한다는 뜻이다.

그 밖에 *{}를 묶은 이유는 전체 객체에 가로세로 값을 지정하는 것(* 찍으면 전체 적용)이며, html문서의 각 속성에 따라 클래스나 id값을 지정하여 가로, 세로나 색상 등을 지정할 수 있는 것이다.

 

스타일 시트도 굉장히 많은 명령어가 있지만, 오늘은 width, height, color, border 등에 대해서만 알아본다.

 

먼저 width값은 화면이 x축, y축으로 나뉜다면 x축의 값을 지정할 수 있다.

100%를 설정한다면 좌측~우측의 거리가 화면 전체가 되는것이고, 사진처럼 500px으로 설정한다면 좌측~우측 사이 간격이 500픽셀이라는 말이다.

 

height값은 화면의 y축의 값을 지정하는 부분이다.

width와 같이 px로 지정할 수 있다.

 

color는 객체의 속성을 지정하는 명령어이다.

color : red 하면 그 부분의 글자가 빨간색이 되는 것이고, background-color : red; 라고 입력하면 배경색이 전부 빨간색이 되는 것이다.

 

border 라는 명령어는 ,,, 각 객체의 테두리를 지정해주는 명령어 이다.

테두리의 선 굵기, 테두리 선 색상 등을 지정할 수 있다.

 

간단하게 html문서를 작성하고, div태그와, ul, li태그로 틀을 짜 보았다.

그 후 스타일시트에 

margin값과 padding값을 0씩 주었고, 

width 값과 height값에 500픽셀씩 주었다.

또 border값에 테두리 1픽셀을 나타내는 1px, 실선을 지정하는 solid, 색상을 나타내는 #ccc 를 작성하였다

 

적용 한 후 모습인데, 박스의 테두리가 각각 500px의 값을 가지는 정사각형 모양 안에 내가 사는 동네 이름이 나온다.

 

*{}안에 값은 저 정도가 전부이고, #box{} 안에 background-color : blue; 를 적용하면 배경색이 바뀐다!

 

그리고 .boxinbox{} 안에 color : red; 갑을 지정하면 글자색깔만 빨간색으로 바뀌어서 이런 모양이 된다.

 

여기서 .box와 #boxinbox의 차이가 뭔가 싶은데, 

 

그것은 바로 id값과 class값을 지정하느냐의 차이이며, 

id값에 "box" 라는 값을 지정 후  ul태그 속성인 #box의 값이 background-color : blue; 가 적용되는 것이고,

boxinbox의 값은 class 지정을 하였기 때문에 .boxinbox의 값에 color : red; 를 적용시킬 수 있는 것이다.

 

그렇다면 전체 배경색상 말고 .boxinbox의 값에 background-color와 color의 값을 둘 다 지정해주면 어떻게 될까??

 

똑같은 값이 나온다. 이 것은 내가 *{}에서 전체 테두리를 500씩 제한해서 이렇게 나오는 것이고 *{} 값을 주석처리한다면 

 

 첫번째 li 태그인 "부산광역시 동래구 출렬대로" 의 테두리에만 글자색과 배경색이 적용된다.

 

아마도 .boxinbox말고 #box의 값에다가 color : red; 를 적용하고, background-color : blue; 의 값을 적용한다면 

첫번째 li태그 아래쪽의 2,3,4 를 나타내는 글자도 색상이 변할 것이다.

 

차이점을 보기 위해 #box의 color 값은 카키색으로 지정했다.

2,3,4의 글자색은 미세하게 티가 나지만 카키색이 되어버렸다.

 

이렇듯 스타일시트를 지정할 때는 당장 눈에 보여지는 가시적인 부분을 변경 할 수 있다.

 

다음 포스팅은 아마도 flex 부분을 작성할 것 같다.

flex부분은 수업들을때 너무 어려워서 잘 모르는데 복습을 좀 해야겠다.

캠핑가고싶다.