닷넷 공부를 하면 뭐하나..! 문법을 모르는데..!!!
그래서 잠시 빠져나와서 HTML, CSS, JS 공부를 하려고 한다.
지금 회사가 바빠서 집중적으로 나에게 뭘 안시키는데.. 그 김에 공부를 하고있다ㅋㅎ
..좋은건가?
HTML도 공부 했는데 그 때 블로그에 올릴 생각을 못했다. 이거 쓴 뒤에 올려야지!
css는 어쩌다 탄생한 걸까?
--> HTML의 단점인 구진 UI를 개선하기 위해.^^
둘은 아예 다른 언어이고, 그렇기에 컴퓨터에게 뭐가 HTML 코든지, 뭐가 CSS 코든지 알려줘야 함.
css의 장점
태그 하나 하나에 디자인을 넣지 않고, 한 줄로 전체 디자인을 바꿀 수 있다.
<style>
a {
color: red;
}
</style>이 코드를 통해 모든 a 태그의 색을 빨간색으로 바꿀 수 있게 된다!
<style>이라는 태그는 "여기다 css 코드를 작성해!" 라는 뜻이고,
a {} 는 "모든 a 태그에 대해" 라는 뜻이다.
div와 class
<div>는 맨날 보기만 했지 뭔지 몰랐는데
그냥 뜻 없다.
요소를 나누기 위한 명명 느낌으로 받아들이는 중.
div 안에 class="" 통해서 화면을 구성한다. 여기서의 class는 우리가 아는 그 클래스 아님. 스타일 시트로 이해해야 한다.
div와 id
div 안에 id=""를 통해 그 전체 div를 접근할 수 있게 된다. 이런게 처음이라 그런지 음.. 프론트에서 변수 선언하는 느낌이었다.
<div id="grid">
<div id="article">
<h2>Welcome</h2>
Hello World!
</div>
</div>
이렇게 제목과 본문을 하나의 "article" div로 묶게 되면, css에서
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid #article{
padding-left:25px;
}이렇게 id 값으로 접근할 수 있다.
grid의 디스플레이 값을 grid로 넣음으로써 화면 크기에 반응하는 구조를 만들었고, column 형태로 레이아웃을 설정했다. 제목과 본문 2가지 값을 주었고, 제목은 150픽셀, 본문은 화면 크기에 따라 나머지를 다 차지하도록 1fr으로 설정했다.
grid 라는 id를 부모로 가진 article 이라는 id를 찾기 위해서 저렇게 한다. 왼쪽 패딩만 주었다.
id와 선택자
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}#과 .과 아무것도 없는 것이 있다. 셋 다 요소를 선택하기 위한 것이지만, 우선순위에 차이가 있다.
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a>#은 아이디를, .은 클래스를 잡는다. 그리고 아무것도 없는 것은 태그를 잡는다.
포괄도를 기준으로 생각해보자. 태그와 아이디 중 어느 것이 더 구체적인가?
당연히 아이디이다.
효율적으로 화면을 그릴려면, 포괄적이고 흔한 것 먼저 그려놓고 그 위에 하나씩 구체적인 것들을 그려나가야 한다.
중요도는 그래서 아이디>클래스>태그 순이다.
셋이 겹치면 아이디 값이 보여진다. 따라서 CSS 라는 단어는 #active의 영향을 받아 빨간색이 될 것이다.
역시 HTML은 .saw의 영향을 받아 회색이고, JavaScript는 태그만 있어서 검은색이 된다.
border, margin, padding
사실 이 부분은 코틀린이랑 플러터에서 많이 해서 설명은 생략..
개발자 모드 들어가서 어디에 적용할 지 보고 하면 될듯.
media query
똑같은 페이지인데 컴퓨터와 핸드폰에서 다르게 보이게 만들고 싶은 경우, 이 것을 이용한다. 반응형 웹은 요즘 없어서는 안될 기술..
나는 예시로 화면이 800픽셀 이상이면 PC버전, 이하면 모바일 버전으로 설계를 했다.
@media(max-width: 800px) {
#grid{
display: block;
}
h1 {
border-bottom: none;
}
}최대 800까지는 (800 이하는) 위에서 봤던 column 형태가 아닌 block 형태로 주어서 한 요소가 화면 가로 전체를 차지하도록 했고, 그 외 요소들도 많이 바꾸었다.
중요한 것! 이렇게 미디어 쿼리를 쓰고 싶으면 css 코드의 가장 아래 놓는 것이 좋다. 다른 요소들과 중첩되어 원하는 대로 반응하지 않을 수도 있기 때문이다.
굉장히 간단한 형태지만..^^ 이런 식으로 화면 크기에 따라 레이아웃이 바뀔 수 있다는 것만 알아도 좋을 듯 하다.
css 코드 파일 분리하기
css 관련 코드는 <script> 안에다 넣었었는데, 만약 비슷한 디자인이 여러 페이지에 반복된다면 코드의 중복이 이뤄진다.
그리고 코드는 중복을 없앨수록 좋다. 매우 중요!!!!!!
script 내부 코드만 복사를 한 뒤, 따로 styles.css 파일에 저장했다.
그 다음, HTML <head> 내부에
<link rel="stylesheet" href="styles.css">라고 넣어주었다.
그러면 styles 파일 내부에 있는 css 코드가 그대로 적용이 된다.
