728x90 반응형 CSS/생활코딩10 [CSS]position 각각의 엘리먼트의 위치를 지정하는 방법이 4가지가 있다. 1.static 2.relative 3.absolute 4.fixed static vs relative 이렇게 생긴 레이아웃에서 me를 왼쪽으로 100px, 위쪽으로 100px 움직여 볼 것이다. 이렇게만 해서는 움직이지 않는다 position:relative; 를 줘야한다. bottom과 top이 있으면 top이 우선 left와 right가 동시에 있으면 left가 우선 css의 postion의 기본값은 static이다. (원래 위치해야 하는 그곳에 정적으로 위치한다) 그래서 상대적으로 상하좌우로 이동시키고 싶으면 position을 relative로 지정해줘야 한다. position type이 relative일 때 off-set을 사용할 수 있다.. 2022. 3. 28. [CSS기초] 캐스 케이딩과 레이아웃 캐스 케이딩 하나의 태그에 중첩해서 css 두었을 때 어떤것을 우선순위로 두냐는것 1순위: style 속성 2순위: id 선택자 3순위: 클래스 선택자 4순위 : 태그 선택자 결론적으로 css의 색깔은 파우더 블루 우선순위가 복잡할때는 !important 쓰면 해당 속성/선택자의 우선순위가 1위로 올라감 인라인 모델,블록 모델 화면전체를 사용하는 태그 => block element 화면의 일부를 차지하는 태그 => inline level element 수업내용에 해당하는건 화면전체를 다 사용하는것이기에 block element 미닝에 해당하는 네모는 화면의 일부를 차지하는 것이기에 inline level element 인라인과 블럭을 임의로 바꿔주고 싶으면 display:inlie display:bloc.. 2022. 3. 28. [CSS 기초] font-size/color/text-align font-size 폰트 사이즈는 글꼴의 크기를 지정하는 것으로, 주요 단위로는 px,em,rem이 있다. px은 폰트의 크기가 고정되어 있는 것이다. em이나 rem은 사용자가 브라우저에서 폰트의 크기를 바꾸면 폰트의 크기가 가변적으로 변화한다. 오늘날에는 이 세가지 단위 중 rem을 쓰면 된다. 그 이유는 폰트 크기를 조정할 수 있는 사용자의 권리를 존중해주기 위해서이다. px와 rem의 가장 큰 차이점은 사용자가 브라우저의 글꼴 크기를 키웠을때인데, px은 바뀌지 않고, rem은 바뀐다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #px{ font-size:16px; } #rem{ font-size:1rem; } PX REM cs PX와 REM 모두 글.. 2021. 12. 28. [CSS기초] 부모자식 선택자/가상 클래스 선택자/여러가지 선택자들 부모자식 선택자 태그 부분에만 폰트컬러를 붉은색으로 주고 싶을 땐 어떻게 해야할까? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 HTML CSS JavaScript HTML CSS JavaScript cs 이럴때는 ul li 를 이용하면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ul li{ color:red; } HTML CSS JavaScript HTML CSS JavaScript cs 태그 안에 또 하나의 을 만들고 테두리를 그려서 구분해주려면 어떻게 해야할까? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28.. 2021. 12. 22. 이전 1 2 3 다음 728x90 반응형
