CSS 관련 끄적끄적

HTML은 넘어가자 내가 가장 궁금했던것이 CSS 이니까. 현재 CSS관련하여 맛만 조금 보고 있다. 그러므로 지금 알게된 것들을 정리해 보고자 한다. ​ 사용법은 외부에 CSS파일을 불러와서 사용하는 방법을 기준으로 한다. 그러므로, 헤더 영역란에서 링크 태그에서 선언을 해줘야 한다.

<link rel="stylesheet" type="text/css" href="csi.css" /> // csi.css는 불러올 css

파일이다. ​``` id= 사용법 id = 사용법은 태그안에서 단 한가지의 함수를 불러와 적용을 시키기 위해 사용한다. 다만, 이 함수가 #특성이름 { 구현 } 이렇게 되어야 사용가능하다. ​

//myHtml.html ....

<div id="myCss">....</div>
.... // csi.css 에서 #myCss { color : red}

이러면 html코드상에서는 각종 태그가 생략되어 깔끔해져 보인다. 하지만 글자의 색상은 빨간색으로 보일것이다. 중괄호 {} 안에는 여러 특성을 지정해 주어도 된다. ​css //h1 {color:red } 이런식으로 하면 모든 h1 태그에 대하여 적용이 되는것 같다. ​ 만약 두가지 이상의 특성을 적용하고자 한다면 class를 이용하자. 다만 적용할 특성은 css 파일에서 # 대신 . 으로 작성해야 한다.

// csi.css 에서
.myCss1 { color : red ....}
.myCss2 {.....}
​```
이렇게 css 파일에서 선언을 해주고, 사용하려면 저 특성 사이에 공백을 주고 작성해 주면된다.

```html
//myHtml.html ....
<div id="myCss1 myCss2">....</div>
....

이러면 두가지 특성이 같이 적용된다. 다만 특성이 같은것을 서로 바꾸려 하면 무슨일이 생길지는 아직 공부가 덜 되어있다. ​ 반응형 웹에 대하여 반응형 웹은 아직까지는 출력하고자 하는 대상의 화면이 서로다른경우, 알맞은 화면을 출력하는것 같다. 정확하지 않다. 데스크톱 화면을 모바일로 볼때 화면을 줌인해야하는 경우를 막을수 있을거 같다. 그에 관련하여 흥미가 있어 강의대상은 아직 아니지만 개인적으로 공부를 해보았다 ​ 반응형 웹도 css 파일을 이용하여 작성이 가능하다. 다만, html 파일에 헤더에 메타 태그에 다음을 작성해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1" /> ​

아무래도 뷰포인트라는 이름의 변수에 접속한 기기의 가로 크기를 가져오라는것 같다. 다음은 css에서 작성법이다.

@media (max-width: 768px) {
  ....;
}

가로화면의 픽셀이 768px 미만인 경우에 대하여 중괄호 안쪽을 실행하게 된다. 다만 max-width를 사용하려면 큰 픽셀에서 부터 작은 픽셀인 경우로 작성을 해야한다. ​ 만약 작은 픽셀의 경우부터 위에서 부터 아래로 작성할수록 큰 픽셀에 대하여 작성하려면, max-width 대신 min-width를 사용하면된다. 이런 방식은 데스크탑대신 작은 화면을 가진 모바일 기기 우선 방식이다. ​ 여튼 이렇게 @media ( ~ : ~ px){ }로 작성을 한경우 주의해야 할점이 있다. 데스크톱 우선이든 모바일 우선이든 먼저 작성된 특성이 있는데, 이 특성은 화면의 크기가 변해도 계속 유지되고 있다.

그러므로, 몇 몇 특성을 none 혹은 특성을 부여해야 올바르게 동작할 것이다. ​ 데스크톱 환경에서 왼쪽과 같이, 모바일에서 우측처럼 만들려면

먼저 어떻게 만들었는지가 관건이겠지만, 전자의 경우에는 A, B에 float 설정을 none으로 바꾸고, width를 자동으로 만들어줄 필요가 있으며 후자의 경우에는 width 특성을 부여한뒤에, float 설정을 부여해야 할것이다.