생활코딩 css 공부하기1

css를 생활코딩을 보며 공부하였다.

2020.02.29

오늘은 생활코딩에서 css강의를 처음 들었다.

css의 간단한 소개와, 실습환경, html과 만나는 방법 등을 배웠다.

오늘 이웃분 중 한분이 실습한 코드도 첨부하여 글을 쓰면 사람들이 보기에 더 좋을 것 같다고 하셨다.

실천해보려다가 생활코딩 강의 밑에도 예제코드가 잘 되있다는 것을 발견했다.

그래서 그냥 내가 공부한 캡쳐화면만 올려도 충분할 것 같다.

 

html과 css의 코딩

강의 중 한 장면인데 확실히 따로 하는 것이 효율적인 것 같다.

 

html과 css를 비교하는 코드

처음에는 여러가지방법으로 html 에 css를 첨가했다.

 

여러가지 selector

다양한 선택자들이 있다.

 

선택자 실습

실습을 여러가지 해봤다.

 

pseudo class selector 가상 선택자

가상 선택자에 대해서도 배웠다.

 

오늘의 메모장

2020.02.29
css의 소개
웹페이지를 꾸며주는 언어이다.
html이 없으면 css는 혼자 쓸 수 없다.
css가 나온 이유는 웹디자인을 하기 위해서이다.
시작은 font태그이다.
디자인하는 태크이다.
html에 디자인과 정보가 공존하게 된다.
웹이 발전하기 시작한다.
디자인의 기능을 따로 뺀다.
그것이 css이다.
css는 html이 아닌 완전히 새로운 언어이다.
정보와 디자인을 분화시켰을 때 효과가 훨씬 크다.
html이 정보에 집중할 수 있었다.
css는 디자인에 훨씬 효율적인 언어를 갖출 수 있었다.
style태그를 이용한다.

실습환경
웹브라우저와 메모장과 아톰이 필요하다.
helloworld.html

html과 css가 만나는 법
html_css_1.html
css를 사용하는 두가지 방법이 있다.
style태그를 사용하는 방법이다.
그리고 style이란 속성을 사용한다.
html표준 내의 약속이다.
둘다 html의 문법이다.
css의 문법은 style 태그 안에 있는 코드들이다.

선택자와 선언
selector_declaration.html
구글에 css selector를 이미지 검색한다.
selector 주어
declaration 서술어
property 속성
value 값
; 선언을 구분해주는 구분자 

선택자의 종류
태그선택자 태그를 선택하는 선택자
selectors_1.html
아이에게 말을 가르칠때 주어(엄마아빠)를 먼저 가르쳐주는 것처럼 주어를 먼저 본다.
selector은 주어를 의미하는 중요한 주제이다.
id 선택자
id라는 이름의 속성을 사용하고 속성값을 적용하고 그것을 선택할때 그것은 id값 앞에 #을 붙여준다.

클래스 선택자
selector_2.html
class라는 이름의 속성을 사용하고 속성값을 적용하고 그것을 선택할때 그것은 class 값 앞에 .을 붙여준다.
class 라는 것은 어떠한 대상을 관리하기 쉽도록 그룹핑하는 것을 의미한다.
id는 학번이나 주민등록번호를 의미한다.
id한번만 등장해야한다.
여러번 등장한다면 class라는 속성을 사용해야한다.
class는 같은 태그 뿐만아니라 서로 다른 태그도 그룹핑해서 표현할 수 있다.

부모 자식 선택자
parent_child_selector_1.html
ul 밑의 li 만 선택하려면 띄어쓰기로 표현하면된다.
부분선택이 가능하다.
id 값을 주고 > 표시하면 직계만 적용된다.
,를 사용하면 중복 선택이 가능하다.
지금까지한게 가장 중요한 선택자이다.

선택자팁
선택자를 다 외울 순 없다.
http://flukeout.github.io/
selector을 자유롭게 다룰 수 있도록 하는 게임 사이트이다.
하면 좋다.
치트씨트 커닝페이퍼이다.
구글 이미지 검색에서 css cheatsheet selector 를 검색해서 찾아본다.
개발자의 세계에서 커닝페이퍼는 나쁜 것이 아니다.

pseudo class selector
pseudo_1.html
가상 클래스
클래스선택자처럼 동작하지만 클래스 선택자는 아닌 여러가지 선택을 하는 선택자이다.
잘 이해가 안 간다.
아무튼 해본다.
: 을 사용한다.
두개가 동급이면 뒤쪽에 있는 선언을 선택한다.

링크와 관련된 가상 클래스 선택자
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때 
:active - 마우스를 클릭했을 때 
위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다. 
color
background-color
border-color
outline-color
The color parts of the fill and stroke properties

여러가지 선택자들
게임으로 공부한다.
http://flukeout.github.io/

 

마지막으로 게임으로 선택자를 구별하는 연습을 했다.

css 선택자 구별 게임

 

게임 끝까지 한 장면 캡쳐함

생활코딩 강의에서 같이 풀어주는데 26번까지만 있고 나머지는 자신이 해야한다.

쉽다.

 

커닝페이퍼

개발자에게 커닝페이퍼는 반칙이 아니라고 한다.

 

선택자를 잘 나타내주는 그림

이미지로 검색해서 이해하면 더 좋다고한다.

 

코로나때문에 밖에 안 나가니깐 시간이 많이 남아서 코딩공부를 더 하게된다.

때문에 글도 길어진다.

내일도 열심히 공부해야겠다.