CSS 기술의 서두

html을 통해 문서를 만들수 있게 된 이후에 사람들은 곧 여러가지 불만족을 쏟아냈다.

문자의 크기와 색상을 변경하고 싶다, 가운데 정렬을 하고 싶다 등등...

웹을 만든 사람들은 웹페이지를 아름답게 만들고 싶은 고민에 빠졌고, 두 가지 갈림길이 생긴다.

쉽지만 한계가 있는 방법
어렵지만 근본적인 해결책

html이라는 이미 있는 언어에 디자인과 관련된 새로운 태그를 추가하는 것과,

디자인에 최적화 된 완전히 새로운 언어를 만드는 것 중 어떤것이 더 쉬운 것일까? 전자가 더 쉬운 것이고 쉬운 길이다.

웹 개발자들은 쉬운 길을 선택했다가 한계를 깨닫고 근본적인 해결책을 찾게 되는데, 그것이 바로 CSS 이다.

<a>태그는 링크라고 설명하는 정보이다.

<h1>태그는 웹페이지에서 제목이라는 것을 설명하는 정보이다.

그러면 이 태그는 어떨까?

<font color=”red”>

<font>태그는 웹에 대해서 어떤 정보도 가지고 있지 않다. 다만 빨간색으로 표현해야 한다는 디자인을 나타낼 뿐이다.

디자인은 중요하지만, 디자인 자체가 정보는 아니다.

웹페이지의 소중한 정보 안에서 정보가 아니라고 할 수 있는 디자인에 대한 코드가 섞이면

정보로서의 가치가 현격하게 떨어지는 문제를 갖게 된다.

웹이 처음 나왔을 때, 웹브라우저는 html 언어만을 해석하여 처리하는 프로그램이였다.

css는 html과는 완전히 다른 컴퓨터 언어이다. 그러면 우리가 웹브라우저에게, 지금부터 css코드를 쓸 것이며

html이 아닌 css의 문법에 따라 해석해야 한다는 것을 알려줘야 한다.

<head>
<style>
   <!-- css 문법을 적용한다 -->         
</style>
</head>

디자인과 관련된 코드는 <style>태그 안에 갇혀 있게 되며, 웹페이지를 해석하는 기계들은 디자인과 관련된 부분은

무시하고 정보만을 가지고 있는 코드를 분석해서 여러가지 작업을 각자의 의도에 맞게 할 수 있다.

즉, html이 정보에 전념할 수 있도록 한다.

선택자(selector)

<font>태그로 글자의 색을 바꾼다면, 1억개의 글자가 있다면 1억개 모두를 일일이 바꿔줘야 하지만 css를 사용하면

원하는 태그의 모든 글자 색을 한번에 바꿀 수가 있으며 동시에 중복되던 코드도 모두 없앨 수가 있다.

<style>
<!-- 모든 a태그에 대해 적용된다 -->
 a {
 color : green;
 }
</style>

여기서 a는 선택자(selector)라고 하며 선택자에게 지정된 효과를 선언(declaration)이라고 한다.

color는 속성(property)이며, green은 속성 값(value)를 뜻한다.

출처&amp;amp;nbsp;https://www.youtube.com/watch?v=nC2-nJEXL2U&amp;amp;amp;list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&amp;amp;amp;index=5

html 안에서 css요소를 삽입하고 싶다면 style 속성을 사용한다.

<!-- style 태그를 사용하여 css 삽입 -->
<style>
a {
color : green;
text-decoration: none;
}
</style>

<!-- style 속성을 사용하여 css 삽입 -->
<h1 style="color:gold; text-decoration: underline;">BEAUTIFUL POEM</h1>

css의 속성은 세미콜론을 사용하여 문장을 구분한다.

웹페이지 안에 css를 삽입하는 방법

1. <style> 태그를 사용한다.

2. style 속성을 사용한다.

css 속성(property)의 종류

font-size : 글자 크기
color : 글자색
background-color : 배경색
font-family : 글꼴의 종류
text-decoration : 글자 디자인
display : 요소를 안보이게 하거나 부피감 레벨을 다르게 지정한다.

CSS의 class와 id 선택자 : 속성을 정확하게 누구에게 타겟팅 하기

속성을 알고 있다면 그 속성을 적용할 대상이 무엇인지 적용 대상을 정확히 알고 있어야 한다.

class라는 말은 무언가를 그룹핑한다는 것이고, id는 어떤 한 대상을 식별한다는 것이다.

class는 반이며 id는 학번같은 것.

class라는 속성은 서로 그룹핑하는 것들을 같은 이름의 class로 지정하는 것이고

id는 한 번 사용하면 중복하여 사용할 수 없다(동작은 하지만 규약 위반)

즉, id는 식별하는 것이고 class는 그룹핑하는 것,

class 선택자는 포괄적이며 id 선택자는 무엇을 정확히 타겟팅한다.

class 선택자를 통해 효과를 주고 싶은 태그들을 광범위하게 설정하고, 그 중 예외처리하고 싶은 태그들을 id 선택자를 통해 예외처리 하도록 사용한다.

class 선택자는 점 연산자를 사용하고, id 선택자는 #을 사용하여 나타낸다.

<!-- "saw" class 선택자와 "active" id 선택자를 동시에 갖는다 -->
<a href="poem2.html" class="saw" id="active">두 사람</a>

<!-- id 선택자 -->
#active {
 color:red;
 }
 
<!-- class 선택자 -->
.saw {
color:gray;
}

id 선택자에 의해 글자 색은 gray가 아닌 red로 표시된다.

<선택자의 우선순위>

id 선택자와 class 선택자가 붙으면 id 선택자가 우선순위를 갖는다.
클래스 선택자와 태그 선택자가 붙으면 클래스 선택자가 우선순위를 갖는다.
모두 같은 선택자라면 가장 마지막에 등장하는 선택자가 우선순위가 높다.

박스 모델

html 태그 하나하나를 일종의 박스로 취급해서 부피감을 결정하는 것을 css박스모델 이라고 한다.

<border>태그로 테두리를 그려서 부피감을 구할 수 있다.

<h1>태그는 화면 전체를 부피로 쓰며, <a>태그는 자신의 컨텐츠만큼 부피를 쓴다.

화면 전체를 부피로 갖는 태그들을 block level, 자신의 컨텐츠만큼 부피를 갖는 태그들을 inline level 이라고 한다.

이렇게 지정된 level은 display 속성을 통해 바꿀수도 있다.

h1 {
display: inline; <!-- block 레벨을 갖는 h1 태그가 inline 레벨이 되었다 -->
}
a {
display: block; <!-- inline 레벨을 갖는 a 태그가 block 레벨이 되었다 -->
}

<!-- display: none; 요소가 보이지 않게 만든다 -->

컨텐츠와 테두리 사이에 간격이 생기도록 만들고 싶다면 padding 속성을 사용한다.
테두리와 테두리 사이에 간격이 생기게 만들고 싶다면, 혹은 간격을 없애고 싶다면 margin 속성을 사용한다.

https://docs.microsoft.com/ko-kr/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding

개발자 도구를 사용하면(오른쪽 클릭 - 검사) 한 눈에 부피를 확인하며 수정할 수 있다.

div와 span, grid

디자인이라는 목적을 위해 어떤 의미도 존재하지 않는 태그를 사용해야 할 때가 있다.

그런 경우 사용하는 태그를 <div>라고 한다. 아무 용도 없이 디자인을 위해 사용하는 태그이다.

<span>태그 또한 같은 용도로 사용하며, <div>태그는 전체를 부피로 갖는 block level 이고

<span>태그는 자신의 컨텐츠만큼을 부피로 갖는 inline level이라는 차이점이 있다.

목록과 본문이 나란히 배치되는 디자인을 하고 싶다면 grid 방법을 사용한다.

이 때는 태그들을 감싸는 부모 태그가 필요하다.

<!-- h1태그를 감싸는 부모 div태그에 grid라는 id를 주었다 -->
<body>
<div id = "grid">
    <h1>HTML</h1>
    <h1>CSS</h1>
</div>
</body>

<style>
        h1 {
            border: 5px gray solid;
        }
        #grid {
            border: 5px pink solid;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
</style>

display 속성으로 grid임을 나타내고 grid-template 속성으로 grid를 적용한다.

아래와 같이 나란히 배치된 것을 확인할 수 있다.

반응형 디자인

화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 만드는 것을

반응형 웹, 반응형 디자인이라고 한다. 화면의 크기에 따라 요소를 보이게 하기도 하고, 안보이게 하기도 한다.

이 때 필요한 것은 '미디어 쿼리' 이다.

" screen width > 800px display : none; "

screen의 크기가 800픽셀보다 클 때 display을 none 하고 싶다면,

화면의 크기가 최소 800픽셀이라는 의미와 동일하다.

즉, 화면이 800픽셀보다 크다면 요소는 사라지게 된다.

<style>
<!-- 화면이 800픽셀보다 크다면 div요소는 사라지게 된다 -->
@media(min-width:800px) { 
	div { display:none; }
}
</style>

반대로 최대 800픽셀이라면, 스크린의 폭이 800픽셀보다 작다는 뜻을 갖게 된다.

즉, 화면이 800픽셀보다 작아지면 요소는 사라지게 된다.

<style>
<!-- 화면이 800픽셀보다 작다면 div요소는 사라지게 된다 -->
@media(max-width:800px) { 
	div { display:none; }
}
</style>

이렇게 어떤 조건을 만족할 때에만 css내용이 동작하도록 작성하는 것을 미디어 쿼리라고 한다.

해당 게시글은 '생활코딩' 님의 Web 강의를 참고하였습니다.

출처 https://www.youtube.com/watch?v=Ok0bBJPtgJI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B

'WEB' 카테고리의 다른 글

WEB(5) : Java Script - 배열, 함수, 객체 (0)	2021.12.21
WEB(5) : Java Script - 조건문, 반복문 (0)	2021.12.21
WEB(4) : Java Script - event, querySelector() (0)	2021.12.21
WEB(2) : 웹의 역사와 웹 서버(Web Server), 웹 호스팅(Web hosting) (0)	2021.12.14
WEB(1) : HTML (0)	2021.12.14

winterrosy

WEB(3) : CSS

CSS 기술의 서두

'WEB' 카테고리의 다른 글

티스토리툴바

WEB(3) : CSS

CSS 기술의 서두

'WEB' 카테고리의 다른 글

'WEB' Related Articles

티스토리툴바