오늘로 2일째
오늘도 어제와 같이 8시부터 한시간 동안 헬스를 한 후 열시에 위코드 도착
오늘은 CSS 나머지 부분에 관해 한 번 더 복습 개념으로 했는데 헷갈렸거나 처음 알았던 사실들을 아래에 기록한다.
inline vs block
blcok 요소는 좌우 측에 아무것도 올 수 없는 독립된 요소, inline은 그 반대
그러나 display 속성을 부여하면 inline이 block, block이 inline으로 변하게 된다.
.inline-p {
display: inline-block;
display: block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}-> inline과 float이 있다.
display: none; 속성도 있다. 해당 요소는 화면에 보이지 않지만 interactive한 웹을 구현하기 위해 사용된다. 예시는 아래와 같다.
-> 해당 영역이 none으로 보이지 않다가 텍스트를 입력하는 순간, javascript가 다른 클래스로 교체
요소를 보이게/안보이게 할 수 있는 것이다.
float
float은 부유한다는 뜻으로 주로 block 속성이 된다.
float: right , left, none; 값이 있다.
clear 속성은 float속성을 통해 태그를 부유시킨 후 그 흐름을 제거하기 위해 사용
clear:left , right, both; 값이 있다.
-> 또한 float속성을 써서 float시킨 값이 밖으로 흘러넘치게 될때는 overflow: auto; 값을 쓰면 자동으로 감싸준다.
li 태그
li태그를 사용하면 앞에 숫자나 점표시가 생긴다.
이 표시를 없애고 싶으면 li태그만 쓰는 것이 아닌 list-style: none; 값을 사용해야 한다.
selector 표기법
차례대로 해당 태그의 첫 번째 순서인지, 마지막인지, 홀/짝수를 선택하는 표기법
selector:first-child {
}
selector:last-child {
}
selector:nth-child(odd) {
}
selector:first-child(even) {
}
input
<body>
<div class="survey-container">
<div class="input-wrap>
<input type="text" placeholder="ID">
</div>
<!--생략-->
</div>
</body>위와 같은 코드에서 placeholder에 스타일을 입히려 할 때 css selector는
input::placeholder {
}input에서 text에만 스타일을 입히고 싶으면
input[type="text"] {
}다양한 css selector는 아래의 링크를 참조.
https://www.w3schools.com/cssref/css_selectors.asp
position
position은 크게 static, relative, absolute, fixed가 있다.
간단히 정의하자면 static은 기본 상태, relative는 간섭받을 수 있는 상태, absolute는 절대적인 상태, 즉 어디든 안으로 들어갈 수 있으며, fixed는 고정된 상태를 의미한다.
-> relative 값을 쓰게 되면 즉각적인 변화가 일어난다기보다는 top, left, right, bottom을 쓸 수 있게 되며 그로 인해 간섭받게 되는 것. (좀 더 공부가 필요할 듯 하다)
