기초단계/HTML&CSS

2022.12.27 CSS 기본

춘핑이 2022. 12. 27. 21:47

CSS

1. css 수업소개

css의 등장
쉽지만 자주사용되는 것

2.css가 등장하기전 상황

문자크기 색상변경 가운데 정렬 등 웹페이지를 아름답게 만들 고 싶었다.
두개의 갈림길에 놓였는데 html에 새로운 태그를 추가하기 / 완전히 새로운 디자인 언어를 만들기
전자가 쉬워서 만들었지만 한계가 생겨서 css가 생겼다.
html의 태그 <font> 색을 바꿀수있게되엇다.
a태그 h1태그 등은 정보를 나타내는 중요한 정보였다.
font는 웹에 대해 어떤 정보도 가지고 있지않고 디자인만 가지고 있다.
웹페이지라는 정보안에 정보가 아닌 디자인이라는 코드가 오면서 정보라는 가치가 떨어지게 된다.
만약 a태그가 1억개가 있다. 그런데 만약 색을 매일 바꿔달라한다면? 말이안된다. 이상황을 극복하도록 css가 등장했다.

3.css의 등장

태그를 추가하는 것보다 어렵지만 근본적인 css가 등장하게되었다.
<!--내용 --> 이사이는 없는셈 쳐라(주석역할인듯)
웹브라우저가ㅣ 처음나왓을때 html만을 해석해서 처리했다. 그래서 기본적으로 이코드를 html이라고 생각한다.
css는 완전히 다른 컴퓨터가 한다. 그러나 html문법으로 해줘야한다.
<style>내용 </style> 이것은 css인 동시에 html의 문법이기때문에
컴퓨터에게 html의 태그이지만 안쪽 내용은 css니까 css의 문법에 맞춰서 처리하라는 명령을 내린다.
a{
color:red;
}
a태그를 모두 red로 바꿔라
css를 새로배워야하니 학습자 입장에서 부담, 웹브라우저에서 새로운언어를 해석하는 기능을 탑재해야되서 어렵다.
그럼에도 불구하고 이용하는 이유는? 그거보다 폭발적인 효과가 있기때문이다.
만약 1억개가 있다면 태그를 1억개를 달아야한다. 하나로 모든 것을 바꾸는 역할을 할 수 있어서 널리 퍼지게 되었다.
코딩을 할때는 중복된 코드를 줄어야하는데 단하나의 코드로 하게 되었다.
중복을 제거하면 장점? 매우 많으면 웹페이지의 사이즈 가 클것이다. 거대한 기업은 하루에 아주 많이 차이가 날것이다.
유지보수할때 목적이 같을 것이니 하기 편리해지고 가독성도 훨씬 높아진다.
기존의 html을 이용하는 것보다 훨씬더 편리하다는 것을 알게 되었다.
디자인은 style안에 갇혀있는다. 디자인이 필요없다면 정보만 분석해서 의도에 맞게 사용할 수 있다.
html은 너무 중요해서 정보의 역할만하도록 정보에 전념하기 위해 등장한 것이 css이다.
또한 css로 디자인하는게 훨씬 효율적이기 때문에 도입하게 된것이다.

4. css의 기본문법

웹페이지에다가 어디서 어디까지 웹브라우저가 css인지를 확인할수 잇도로고 해줘야한다.
style태그 뿐만아니라 속성을 이용하는 것도 있다.
내가 지금 있는 곳만 빨간색으로 표현하고 싶은데 태그만으로는 한계가 잇다. 그래서 생겨난 것이 html의 태그에 속성을 넣는 것이다.
style="color:red"이렇게 넣으면 웹브라우저가 속성의 값을 css문법으로 이해해서 이 태그에 적용한다.
=" "은 html의 속성임. style이라는 속성은 반드시 css효과가 들어온다는 것을 말한다.
태그는 어떤거에 들어갈지 모르니 a{내용}같은 중괄호가 필요한 것이다. 이런것을 누구한테 줄것인지 선택한다는 점에서 a{}는 '선택자'라고 한다.
그안에 들어가는 '내용'이 '효과', 영어로는 '선언' 이라는 것이다.
스타일 속성을 사용하면 거기에 직접 사용할 것이므로 선택자가 필요가 없다.
text-decoration: none; 밑줄지우기
속성에서는 ;로 구분하여 여러개 넣을 수있다. style="color:red;text-decoration:underLine"

5. css의 혁명적 변화


이제 무엇인지를 알게 되엇으니 검색으로 어떻게 쓰는지 알 수 있게 된다.
2가지 여정 1.css를 통해서 디자인하는 어떤 property가 잇는지 2.그 효과를 정확하게 지정하깅 위해서 다양한 선택자를 알기

6. css의 속성을 스스로 알아내기

web제목 글씨크기 키우고 위치를 정렬하고싶다.
CSS font-size Property 검색
CSS text center property 검색하니 아래처럼 나옴
CSS text-align Property =align정렬하다.
이런식으로 아는 단어를 조합하고 검색해서 찾아보자
이러한 property들을 암기할 필요가 있나? 없다. 명령어를 치기만하더라도 필요한 내용을 추천해준다.
필요하다면 검색을 해보자. 배운것 만으로도 모든 property들을 아는것이나 다름없다.

7. css 선택자의 기본

1.링크는 검은색 2.방문한적이 있는 것은 회색 3.현재머물고있는 것은 빨간색
그룹으로 묶고 색을 바꾸기 class라는 속성으로 묶고 (class="saw") sytle태그 사이에
class이름을 선택자로 사용하기 .이름으로 해서 그것을 사용하기
.saw{
color:gray;
}
만약 현재페이지를 이렇게 바꾸고싶다면? 클래스 이름을 하나 더추가해주고
class="saw active"
.active{
color:red;
}

그런데 이방법은 그렇게 좋은 것이 아님. 보다 가까이에 있는 명령이 우선순위를 가진다.
만약 둘의 순서가 바뀌면 회색으로 보임 이걸해결하기 위해 id선택자를 사용하면 id="active"이 가장 높은 우선순위를 가진다.
#active{
color:red;
}
이것을 사용하려면 #이름을 하면된다.
id선택자 > class선택자 > 태그 선택자의 순서로 간다. 전부다 같다면 가장 마지막에 쓴게 우선순위가 높다.
의문? 왜id선택자가 제일 높나? id선택자는 active가 한번만 등장할때만 사용해야한다. 중복되면 안된다. ex)주민등록번호
태그선택자가 id보다 훨씬더 포괄적이다. 그래서 좀 더 구체적인것 예외적인 것이 가장 높은 우선순위를 가지는 것이 디자인하기 편하다.
class선택자는 그 중간의 힘이다.

CSS Selector을 검색해보자
https://www.w3schools.com/cssref/css_selectors.php 링크
이런 선택자를 조합해서 원하는 효과를 정교하게 태그에 타겟팅하고 코드의 양을 줄이고 한부부만 바뀌면 동시에 바뀌도록 할 수있다.

8. 박스모델


선으로 구분되는 간단한 디자인을 만들 것이다.
이것이 박스 모델이다. 선이 테두리이다.
h1은 화면 전체를 크기로 가진다. a태그는 자기 크기만큼 가지고
전자는 block level element 후자는 inline element
display:inline; or block;을써줌으로써 속성을 바꿀 수도 있다. display: none;으로 하면 없어짐
선택자에서 ','를 하면 여러개의 태그를 선택해서 코드의 중복을 막을 수도있다.
h1, a{
border-width:5px;
border-color:red;
border-style: solid;
}
이것또한 중복이 되어 border: 5px red solid;로 줄일수도잇다.

테두리와 컨텐트 사이에 간격을 두고 싶다면? 여백을 두고싶다면 겨울에 잠바를 입자?? padding:px;
테두리사이사이 간격을 조절하고 싶다?? margin:px;
화면전체사용하는 것을 block으로 바꾸고 display:block;
크기를 조절하고 싶다. width:100px;


웹페이지에서 우클릭 하고 검사를 누르면 웹이 어떤 속성을 가지고 있는지 볼수있다.
웹페이지를 분석할때 이런 도구를 사용해서 어떻게 만들지를 알아야한다.
개발자도구를 사용하는 것은 중요하다!!

부피감을 갖는 것은 css box모델이고 디자인에서 핵심적인 요소라는 것을 알 수 있다.

9. 박스모델 써먹기

개발자도구를 사용해서 어느부분이 더 필요하고 어느부분이 덜 필요한지 조절해서 박스모델을 사용해나가는 것이다.

10.그리드 소개
목록과 (ol) body가 옆에 있도록 하자 바로 '그리드'이다.
NAVIGATION ARTICLE 각각 위치를 나누기 위해서 태그를 사용한다.
이것이 <div>태그이고 block element이다.. 아무런것도 없이 디자인에만사용함.
같은거로 <span>가 있고 inline elemeent이다.
이것들의 부피감을 알기위해 div태그 전체에 border를 해주자
div를 div로 부모로 감싸서 배치를 해보자.
디자인의 목적만으로 해보자.
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
grid-template-columns: 150px 1fr;얘들을 하나의 컬럼으로 넣고 싶다.
각각 컬럼 크기 값을 준것이고 1fr은 자동적으로 알아서 늘어나게 만든것임.
fr은 자동적으로 조정하게 만들어 놓은것!
grid를 사용하면 좋은 것이 알아서 크기가 맞춰진다.
최신기술인데 이것을 현재 사용해도 되는지 안되는지 알수 있는지는 caniuse.com에 검색해서
현재 웹브라우저들이 얼마나 사용하고있는지 알기.
그리드로 만들고 하나씩 조정해나가기
개발자 콘솔에서 숫자를 입력해서 가상으로 각 지점별의 크기를 조정할 수 있다. 이것은 실제 반영되는 것이아니라 미리보기?느낌이고 실제 작성하는 데에 작성해줘야한다.
ol은 다른데도 들어갈 수 있는데 모든 ol이 바뀌면 곤란한다.
따라서 #grid ol{}을 해주면 grid id 밑에 있는 ol이라는 것을 표시해줘서 얘만 바뀌게 할 수있다.

12. 미디어쿼리소개

화면의 크기에 따라서 선이 없어지거나 있게 하기? 이것을 '반응형 웹', '반응형 디자인'이라고 한다.
웹은 모든 시스템에서 동작하는 것이다. 여러 화면에 대응되는 화면을 만들기 위해 열심히 해야한다.
다양한 환경에서 적응할 수 있는 것을 위해 반응형 디자인을 만들어냈다.
이것이 미디어 쿼리이다. 이것이 화면의 크기에따라 디자인을 다르게 했다는 것이다.
개발자 도구를 사용하면 화면 크기가 보임.
(screen width > 800px 밑에랑 같은 내용)
@media(min-width:800px){
div{
display:none;
}
}
이 mediaquery를 사용하면 조건을 만족할때만 css가 동작하도록 할 수 있다.
여러가지 화면이 존재하는 세상에서 중요한 역할을 한다.

13. 미디어 쿼리 써먹기

800px보다 작을 때 그리드가 아니게 하기
@media(max-width:800px){
#grid{
display:block;
}
ol{
border-right:none;
}
h1{
border-bottom: none;
}
}
작은화면에서만 구성이 바뀌게 하는 것이다. 다양한 화면에서 어떻게 적응했는지 알게되었으니 필요할때 찾아서 작성해보자.

14. css코드의 재사용

모든 웹페이지에 복사 붙여넣기로 만들어 주었더니 똑같아짐 그런데 이 윂페이지가 아~주 많다면? 어떻게 해야할까?
css가 모든 웹페이지에서 중복해서 등장하면 비효율적이다. 이 중복을 제거하면 매우 편리해진다.
style.css파일을 만들고 style태그만 제외하고 css코드를 별도로 복사해서 만들엇다.
웹브라우저에게 css파일이 있던것처럼 해라
별도의 css파일을 다운받아서 해라 이것이 link태그이다.
어떤 css파일과 연결되어있는지를 알려주는 것이다.
css파일을 다운받아서 윂페이지에 적용하는 것이다.
<link rel="stylesheet" href="style.css">
이렇게 하면 훨씬더 효율적이게 된다. 자바의 클래스를 만든 느낌이다...! 코드를 재사용하게 된다.
다른 웹페이지를 만들어도 이걸 사용하면 스타일이 다 똑같으니 상관없게된다. 코드의양이 줄어서 웹페이지를 다운받을 양이 줄어듬.
캐쉬로인해서 훨씬더 빠르게 웹페이지를 보여주면서 트래픽을 줄일수잇어서 css를 만들었다면 꺼내서 중복을 제거하는 것이 제일 좋다.

15. 수업을 마치며

중요한 규칙인 속성과 선택자를 배웠다.
속성을 많이 알수록 더 풍부한 표현력 선택자를 많이 알수록 더 자세히 표현할 수 있다.
실제로 만든 사이트
https://chunpinge.github.io/my-first-web-site/

<!doctype html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta  charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1><a href="index.html">WEB</font></a></h1>
  <div id="grid">
    <ol>
    <li><a href="1.html">HTML</font></a></li>
    <li><a href="2.html">CSS</font></a></li>
    <li><a href="3.html">JavaScript</font></a></li>
  </ol>
  <div id="article">
    <h2>CSS란 무엇인가?</h2>
    <p>
      Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
      CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.[3] This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting
      Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.
      The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
      The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.
      In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.
    </p>
  </div>
</div>
</body>
</html>
a{
    color:black;
    text-decoration: none;
  }
  h1{
    font-size:45px;
    text-align: center;
    border-bottom: 1px solid gray;
    margin:0;
    padding:20px;
  }
  ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
  }
  #grid{
    display:grid;
    grid-template-columns: 150px 1fr;
  }
  #article{
    padding-left:25px;
  }
  #grid ol{
    padding-left: 33px;
  }
  body{
    margin:0;
  }
  @media(max-width:800px){
    #grid{
      display:block;
    }
    ol{
      border-right:none;
    }
    h1{
      border-bottom: none;
    }
  }

2022.12.27 후기

CSS를 배웠다. 디자인을 하고 홈페이지가 깔끔해지는 것이 보이니 참 재미는 있다.