생활코딩 - CSS (1~6)

개발하는 철학자·2023년 9월 17일
0

생활코딩-웹입문

목록 보기
1/3
post-thumbnail

필자는 생활코딩 HTML강의를 완강 후, CSS를 공부하고 있다.
오늘은 CSS의 1부터 6까지 강의를 이곳에 요약하고 기억할 것을 적어 차후 복습에 활용하려 한다.

CSS 2

1은 수업 소개여서 넘어갔다.
언어의 등장은 아니, 새로운 기술의 등장은 역시 문제에 직면했을때 가능해진다.
HTML로 만든 웹페이지를 아름답게 만드는 방법은 크게 두가지가 있었다.
1) 쉽지만 한계가 있는 방법 - 디자인에 대한 태그를 추가
2) 어렵지만 근본적인 최적화 - 아예 디자인 최적화 언어를 만듬
여기서의 최적화 언어가 바로 CSS이다.

CSS 3

그럼 어떤 한계가 있었길래 여러운 CSS의 길로 간 것일까?
첫 번째 한계는 정보 인식의 불편함,
두 번째 한계는 번거로움
이 두 가지 한계가 있었다.
이 두가지 한계는 우리에게 불행감을 주었고, CSS를 통해 이를 극복할 수 있었다.

  1. 만약 h1태그의 WEB이라는 글자의 폰트 컬러를 바꾸고 싶을때, html의 태그를 활용한다면
<h1><font color="red">WEB</font></h1>

이라고 쓸 수 있다.
하지만 여기에는 문제가 있다.
h1태그는 font태그와는 결이 다르다.
h1태그는 정보를 표현하는 태그임에 반해 font태그는 디자인을 표현하는 태그이다.
디자인은 물론 중요하지만 의미가 있다고 보기는 어렵다. 정보를 가지고 있지 않다.
다른 특성을 가진 태그들이 섞이면서 웹페이지의 정보로서의 가치가 떨어지고 있다.
이때 CSS를 활용하면 상단 부분에

<style>
  h1 {
     color:red;
  	}
  </style>

그런 면에서 둘을 이렇게 한 줄로 적기보다는 확실히 구분해서 적는게 컴퓨터도 인식이 더 편할 것이고, 보기에도 훨씬 깔끔할 것이다. (가독성/ 유지보수 용이함 상승)

  1. 당장 내 웹페이지에 있는 소제목 3개의 글자 색깔을 다 바꾸고 싶다고 해보자.
font color='red'

이 태그를 하나 하나 소제목 3개에 붙이면 된다.
근데 만약, 내 웹페이지에 있는 제목, 부제목 들이 총 1000000000,,,아니 1억개라고 가정해보자.
그렇다면 이는 상상만해도 끔찍하게 귀찮은 일이 된다. 인형 눈 붙이기를 아는가, 그것과 비슷한 일이다.

이때 CSS를 활용하면

<style>
  h1 {
     color:red;
  	}
  </style>

로 끝난다. 중복 제거에 성공했다.훨씬 간편해졌다.

결국 두가지로 요약할 수 있다.
1) HTML은 너무나 중요하기 때문에 HTML이 정보에 집중하게 하기 위해서
2) CSS로 디자인을 하는 것이 HTML로 하는 것보다 훨씬 효율적이기 때문

CSS 4&5

웹페이지에 CSS를 삽입하는 데에는 두가지 방법이 있음.
1) 위에서처럼 태그 작성
2) Style 태그를 작성
1)번의 경우는 지정이 필요하다, 그래서 selector(선택자)/declaration(효과) 두개로 구별할 수 있다.
;으로 끝을 구별한다

a{
  color:red;
  }

여기서 color는 property, red는 value이다.
이를 통해 우리는 이제 내가 무엇을 모르는지 알 수 있고, 검색할 수 있게 되었다.

CSS 6

제목의 크기를 키우고, 가운데 정렬을 하고 싶다!
CSS text size property로 검색한다.
Property를 스스로 알아내는 법에 대해서 배움.

-> 뇌를 혹사시키지 말자. 뇌를 혹사시키면 뇌는 필연적으로 이를 하지 않을 방법만을 찾는다. 그러니까, 모르는 것에 집착하기 보다는. 아는 것에 기쁨을 느끼며 공부를 시작하면 된다. 그래야 오래 할 수 있다.

=> 좋은 말이다. 이 코딩 영상이 좋은 이유는, 끊임없이 체계적으로 따뜻하게 동기부여를 해주기 때문이다. 작심삼일이 심한 나에게 너무 좋은 영상이다. 이를 기점으로 나는 칭찬하는 공부를 시작했던 것 같다. 하기 싫었던 중국어도, 영어도 하루 한단어씩으로 부담을 줄이고 그것을 자주 사용할 것임을 알기에 기쁨을 느꼈다. 내일도 모레도 그렇게. 똑똑하게 공부해나가자.

profile
생각하고 생각하는, 그렇게 사는 개발자.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN