CSS + HTML (20.11.10 ~ 20.11.23)

왜 어제걸 쓰냐면,,

어제 공부를 해보니까 일반 서비스 개발도 좀 로그를 작성할 필요가 있겠더라구,,,

​

어제 내가 헷갈려 했던건 semantic tag.

​

semantic 은 단어의 의미 자체가 '의미론적'이라는 뜻인데,,

​

semantic tag면 특정 기능을 수행하는 태그인게 맞잖아

근데 왜 헷갈렸어, 왜!!

​

semantic tag VS non semantic tag

​

head -> configuration

body -> contents

​

tag + attributes -> very powerful

​

코딩 실습을 반복하면서 수많은 태그와 att들의 결합을 익히자!

암기하지마!! 절대!!!

​

//// 20.11.11

css 짧고 굵게

​

# 3.2

cascadig style sheet -> css

- cascading.

순차적으로 진행되는 행위.

​

css는 위에서부터 (from parents) 아래로 (to child) 순차적으로 진행된다. 따라서 결과적으로 표시되는 스타일은 가장 마지막에 적용한 부분이다. (ex/ head tag stylesheet configuration -> built-in stylesheet -> tag attriubtes)

​

# 3.3

block VS inline

block -> nothing can come next to them.

inline -> can come to same line.

이걸 몰랐네,,, 연 초에 사이드 프로젝트 할 때, div 태그는 그냥 블럭인줄 알고 padding 줄여가면서 병렬 형태로 만드느라고 쌩고생 했는데,,, 그냥 span 태그를 쓰면 되는거였어,,, 하하하하하하하하....

​

# 3.5

collapsing margins.

서로 다른 두 태그의 경계가 겹칠경우 어느 한 요소의 margine 값만 표현되는 현상. 마진상쇄.

​

//// 20.11.12

inline elements (like span) 는 높이와 너비가 존재하지 않아 위 아래 margin을 적용할 수 없다.....라는 내용을 마주했다. 그렇게 잘 이해되는 느낌은 아니지만 일단 외우자.. 언젠가 이해하겠지

​

여튼 그렇다. 하지만 인간의 욕심은 끝이 없이게 높이와 너비를 가지는 (block element의 특성을 가지는) display type 을 만들어냈다. 그게 바로 inline-block. 근데 별로다. default 된 값이 너무 많다. 우리가 설정할 수 없는 값들이 많아서 안쓰는게 더 좋다. 형식도 없고 다 지멋대로라서 안쓰는게 좋아!

​

여튼,, 오늘은 이정도?

​

inline, block, inline-block.

​

​

//// 20.11.13

inline-block 의 대안.

​

flex box.

- 부모에게만 talk 하기. 자식은 터치하지마!

- justify-content : main axis

- align-items : cross axis

flex 박스로 설정해주면 위의 두 속성을 사용할 수 있다.

주축(main axis) 역축 (cross axis) 라는 점을 꼭 기억하자. 주축을 수평선으로 할지 수직선으로 할지는 설정할 수 있기 때문이다. -> flex-direct : row or column (default value is row)

​

사용 중 tip

align-items : center 로 해도, 페이지의 정 중앙으로 오지 않는다.

이유는, body 태그의 height는 contents 의 height 만큼 커지기 때문이지!

작동한거야! 너가 잘 못 했을 뿐!

때문에 body의 height 를 디바이스 크기만큼 키워줘야한다.

height 속성을 vh단위로 설정해주면 되는데,

vh = viewport height

viewport = fullscreen of device

라는 의미이기 때문에 100vh를 하면 fullscreen 이 된다.

​

​

//// 20.11.16

아우 오늘은 너무 피곤해서 저녁먹고 1시간동안 잤다.. 그래서 9시가 넘어서야 공부를 시작하게 됐지,, 인강 레포트도 이번주 안에 써야하는데,, 오늘 밤에 영감이 찾아와 줄지 잘 모르겠다. 영감만 꽂혀주면 진짜 미친듯이 쓰는데,,

​

​

#3.12

position : fixed;

를 하면 conponents 간에 layer가 생긴다. 정확히는 다른거 다 개무시하고 맨 위로 올라와서 위치가 고정됨. 뭔가 역동적인 느낌을 준다거나, navbar를 고정해야한다거나 할 때 사용하기 좋을듯.

top, left, right, bottom 을 수정하면서 page전체를 기준으로 위치를 세부조정 할 수 있다.

​

opacity : value;

단어 뜻 그대로, 불투명함. 투명도를 설정해 주는거다. 비율로 ( 완전투명 : 0.0 ~ 1.0 : 불 투명)

​

#3.13

position : relative;

element가 생성된 첫 위치를 기준으로 top, left, right, bottom을 이용해 위치를 세부조정 할 수 있다.

​

position : absolute;

모든 부모 element 중에 position:relative;로 설정되어 있는 가장 가까운 부모를 기준으로 위치를 조정하는 기능이다. 모든 부모 중에 relative가 없다면 body를 기준으로 움직인다.

이 방식 또한 layer를 만든다.

top, left 등 움직이는 방식은 동일하다.

​

#3.14

pseudo selectors 라는 방식을 사용하면, html 상에서의 tag, class, id 의 설정이 없더라도 elements에 스타일링을 할 수 있다.

div:filst-child, last-child, nth-child(number)

nth-child는 심지어 number 자리에 odd 나 even, 2n+1, 3n+1 같은 형태도 가능함

정말 무시무시한 방식이네..

​

#3.15

pseudo selector에는 다른 방식이 또 있는데,

tag subtag subsubtag { } 방식으로 스타일링을 적용해 줄 수 있다. 하지만 하위태그를 찾을 때 재귀적(?)으로 찾아서, 더 낮는 단계의 태그까지 모두 적용을 시켜버린다.

​

바로 아래 단계의 subtag만을 선택하고 싶다면, 다음과 같은 방식을 사용한다.

tag > subtag { }

​

같은 수준에 있는 태그 중, 순서에 따라서 선정해 주고 싶다면 다음과 같은 방법이 있다.

tag1 + tag2 { }

tag1 이후에 나오는 tag2를 스타일링 해준다. (덧셈으로 착각하지 마라. 둘 다 해주는거 아니다!)

​

#3.16

근데 만약에 tag1 이후에 tag2를 선택해 주고 싶으나, 바로 뒤에 오는 경우가 아니라면?

tag1 ~ tag2 { } 를 사용해주면 된다!

​

pseudo selector 에는 이렇게 꽤나 많은 combiner가 있는데 잘 사용하면 정말 유용할 듯!

​

또 다른 selector가 있다.. (정말 끝도 없이 나오네)

tag와 attribute, 그리고 각 attb의 value를 사용하는 방법인데

tag:attribute { } 는 해당 태그 중 그 attb를 가지고 있는 태그를 선택해준다.

tag[attribute=value] 는 value가 있는 경우에 해주면 되고

진짜 개쩌는건 tag[attribute~=something] ~표시가 핵심인데 value에 something 이란 값을 포함하고 있는 태그들을 선택해준다. 진심대박!

​

이 외에도 엄청 많으니까 잘 찾아보면서 하자

​

​

//// 20.11.17

​

e러닝 레포트 쓰느라고 늦었다.. 얼른 노마드 숙제 끝내고 다시 넘어가야해... 대분류 1만 다 작성하고 ADsP 한 단원이라도 공부하고 자야지!!

​

#3.17

강의 주제는 state인데,, 어제 배운 pseudo selector와 비슷하다.

pseudo selector는 단순히 elements를 선택하는데 국한되는 것이 아니라 각 element의 상태를 특정할 수도 있다. 강의 주제가 states 인 이유.

element의 state는 개발자 도구를 통해서 확인할 수 있다.

button : active, hover, focus 등등등..

​

tag:focus-within { } tag의 하위 element가 focus됐을 때 작동한다.

조건을 연결해서 쓸 수 있다.

form:hover input { } form위에 커서가 올라갔을 때 인풋에 작동하도록, 혹은

form:hover input:focus { } form위에 커서가 올라갔고, input이 focus됐을 때

뭐 이런 식으로? 굉장히 창의적이군

​

#3.18

특정 attribute에 styling을 하고싶을 때

tag::attribute{ } 땡땡이 들어감!! 콜론 두개!!

tag::selection{ }

tag::first-letter { }

​

#3.19

color 설정

name, hexademical(#09090), rgb(0,0,0), rgba(0,0,0,투명도)

뭐 대충 이렇게 4가지 방식이 있다.

​

변수지정

tag들을 쫒아다니면서 style을 지정해주기 귀찮아서 존재하는 기능이 있다. css root

:root { } 여기에 설정해주면 되는데, 설정 방법은

--name-StyleAttribute :

뭐 이렇게 해주면 된다. 앞에 바 두개를 놓으면 설정이 되는거고, 다음은 이름을 정해주면 된다. 이름 다음에는 바 하나를 놓고 style attribute를 적어주면 완성. 그 뒤에 설정해주면 된다.

이후 사용할 때에는 js느낌으로다가 var(--name-StyleAttribute)로 설정해주면 된다

​

ex)

:root{

--main-color : #000000;

}

p {

background-color : var(--main-color:#000000);

}

​

​

#4.0, 4.1

animation의 기초를 배웠다

transition : attributes time cubic-bezier;

하면 된다!

​

#4.2

transformation

transform : rotateX(0deg)

translateX

뭐 이런식으로 쓰는데, 중요한 점은 다른 element나 box에 영향을 미치지 않는다는 점!

또, transtition 의 attributes 자리에 transform을 사용하면 very cool!!

​

#4.3

애니메이션 함수 만들기

@keyframes functionName {

from {

}

to {

}

}

​

적용

tag {

animation : functionName 5s;

}

이렇게? 이게 아마 애니메이션 최종 단계인 것 같아. 되게 재밌다..

​

#4.4

근데 from - to 구조는 너무 단편적이잖아? 그래서 이걸 장편영화로 만들 수 있어. scene을 여러개 넣을 수 있고.

@keyframes identifier {

0%{

}

~~~~

100{

}

}

뭐 이런식으로 %를 정해주면서 만드는 방법이 있어

오늘 강의는 여기까지! 이제 과제하러!

​

//// 20.11.18

레포트와 노마드 코더 챌린지를 병행하다 보니 죽을맛인건 확실하다. 사무실에서 자격증 공부하다가도 틈만 나면 골아떨어진다. 미치겠네이거!

​

그래도 화이팅!

​

#4.5 media quary

사용 방법은 animation에서의 keyframe과 비슷하다.

@media screen and (max-width: 600px) {

}

@media screen and (min-width: 600px) and (max-width : 800px) {

}

이런식으로 조건을 설정해가면 된다!

orientation : landscape;

아 landscape는 가로모드 portrait은 세로모드!

​

​

#4.6 recap

@media quary는 feild 안에 css의 형식을 지켜서 작성해야 한다.

​

media types에는 여러가지가 있다. 근데 screen 말고는 잘 안쓸걸?

​

#5 부분은 git-hub 부분인데,, 여유가 생기면 듣자. 요즘 너무 바쁘잖아?...

​

#6.0 start clone

#6.1

엥? 이제 클론코딩만 하느라고 수업 끝난거같은데?

#6.2 BEM

block element modifier : 일반적으로 css에서 사용하는 class naming 규칙이다.

.btn

.btn__price 하위 element

.btn--orange 속성

대충 이해가지?

​

#6.3 icon

​

//// 20.11.19

​

#6.6

css에는 내가 설정하지 않았어도 자동으로 적용되는 style이 있다. 이는 개발을 하는 상황에 불편함을 야기하기 때문에 미리 없애줄 필요가 있는데 이를 reset CSS라고 표현한다.

구글링 하면 나오니까 따로 stylesheet을 파서 만들어주자.

​

#6.8

css not

tag:not[condition] 의 형태로 작성하면, prseudo selector에서 부정논리를 사용할 수 있다.

​

cursor : pointer;

아니 뭐 커서도 바뀌냐 ㄷㄷ

​

#6.9

<form action="friends.html" method="" id=>

</form>

여튼 form에서 method attribute를 설명하려고

POST 방식이 있고 GET방식이 있는데

POST는 백엔드 서버와 통신하는거고 method="post"

GET은 html file 끼리의 커넥션? 같은거라서 보안에 취약. url에 노출되어도 상관없는 정보만 전송할 것.

method="get"

​

#6.11

box-sizing : border-box; 는 내일 하는걸로 ㅋㅋㅋ

​

#6.12

Box-sizing : border-box;

css는 border를 추가하면 contents의 사이즈가 border만큼 늘어난다.

위의 코드를 작성하면, 이를 방지해준다. border를 늘려도 기존의 contents 사이즈만큼의 box-size를 유지한다.

때문에 그 contents의 사이즈는 {(기존의 contents) - border} 가 된다!

​

​

//// 20.11.23

#6.29

Z-index, layer를 직접 설정해주는 역할을 한다.

​

#6.30

flex display children의 순서를 바꾸는 방법

children1{

order:1;

}

children2{

order:2;

}

이렇게 할 수도 있고

parent{

flex-directionL row-reverse;

}

이렇게도 가능!

​

애니메이션 많이 나왔는데 귀찮아서,,, ㅜㅠㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜ 너무힘들다 ㅜㅠㅠㅜ

내일부턴 자바스크립트 챌린지! 강의는 다 들어놨으니까 쉽겠지?

​

HTML CSS 끝!

​

​- 백업 [출처] CSS + HTML (20.11.10 ~ 20.11.23)|작성자 winney