진도가 정말 천천히 나가기 때문에 아직 JS는 들어가지도 못했다.. 이러다 다까먹으면 큰일인데 ㅋㅋ
그래도 CSS에서 기본적인 개념을 탄탄히 잡고 간다는건 확실히 좋았다
사실 CSS의 가장 기본인 사이즈와 위치 정하는 법을 헷갈렸는데 이번 수업을 통해 그리고 스스로 다시 만들어봄으로써 개념을 이해하게 되었다 (까먹지 말자!!)
수업 때 배운내용
Block inline block-inline none
Block
Block은 h1, p, headers, div, ul, ol ,li등을 말한다
자신이 적힌 위치의 width를 꽉채우는 녀석들이다! 양심없음!!
inline
inline은 span images a 등이 있다
딱 컨텐츠만큼의 width와 height를 가지고 만들어진다
inline-block
p {
width: 100px;
display: inline-block;을 적게되면 인라인처럼 크기가 정해지고
width에서 적은 크기가 설정됨!! -> 블록형태에서 적은 내용이 들어감
}저걸로 설명을 대체하겠다. 그냥 짬뽕이다 ㅋㅋ
none
p {
display: none;
}존재 자체를 안하게 된다!!
원래 p는 Block이기 때문에 width를 채우지만 컨텐츠도 width도 남지 않고 사라짐!!
퀴즈에서 정답가릴때 none과 visibility: hidden 둘 중에 하나를 쓰면 좋다고 한다
visibility: hidden은 크기는 남아있기 때문에 둘 중 적합한걸 쓰자!!
위치 정하기 (static, relative, absolute, fixed)
static
그냥 기본 html룰을 따른다
relative
position:relative하고
top: 20px;하면 그 만큼 떨어진다! (offset이라고 있어보이게 말함)
absolute
부모의 크기에 따라 움직인다
차고로 부모 컨테이너나 상위 html에게 relative라는 속성을 안 써주면 부모로 인식을 못해서
body를 기본으로 인식해버린다 그러므로 꼭 적어주자!
top: 20px;하면 부모의 top과 살짝 멀어진다
top: 400px; 하면 부모의 top과 매우 멀어진다
fixed
화면의 스크롤이 내려가도 계속 보이게 하고 싶으면 적으면 된다!
그 위치에서 계속 보여진다
새로 배우고 이해한 내용
float(이미지옆에 텍스트 붙이기)
.computer {
width: 25%;
float:left;
margin-right:30px;
}
말 그대로 img옆에 설명을 적기 위해 사용하는 css속성이다
사용법은 그냥 어느 위치에 붙이고 싶은지를 정해서 left, right 등을 적어주면 된다.(이미지 위치를 기준으로 정하는게 좋을듯)
굉장히 타이트하게 달라붙기 때문에 computer이미지에서 margin-right를 30을 줘서 조금의 간격을 주었다
이렇게 하면 보는 사람도 편하고 만든 나도 편안해진다 ㅋㅋ
피드백
rem이 16px을 기준으로 늘어나고 줄어든다고 했지만 아직 제대로 아는게 아니어서 좀 더 조사해보자
css쉽게 볼게 아니었네 ,,ㅜㅋㅋ
