본문 바로가기

Web77

css 활용2 글꼴, 문자 # html 영역 Apple Banana Cherry # css영역 .container .item { color: yellowgreen; border: 2px solid black; # 위에를 기준으로 설정된 2만큼 글자가 아래로 내려온다. line-height: 2; font-size: 24px; font-style: italic; # 글씨를 정 중앙으로 맞춰준다. text-align: center; } .container .item:nth-child(2) { font-weight: bold; text-decoration: underline; } 2022. 9. 5.
css 활용1 박스 모델 # html 영역 A B C # css 영역 .container { } .container .item { width: 200px; height: 100px; background-color: tomato; margin-bottom: 20px; padding: 20px; # 각 div에 대해서 영역 구분 # solid로 직선그어주기 border: 4px solid blue; # 이것저것 사이즈 측정이 과하게 될수 있는 것을 # 기본으로 정해준 width 값? 만을 기준으로 맞춰진다. box-sizing: border-box; } .container .item:nth-child(2){ box-shadow: 10px 20px 10px rgba(0,0,0,.3); } .container .item:nth-chil.. 2022. 9. 5.
css 기초4 가상 요소 # 가상 요소 1.ABC::before 선택자 ABC 요소의 내부 앞에 내용을 삽입 예시 .box::before { content: ‘앞’; } blue 라고 되어 있을때 box클래스에 해당하는 요소 앞에 ‘앞’이라는 글자를 삽입한다. 출력 결과물로는 앞 blue가 되겠다. 2.ABC::after before와 원리가 같다. 2022. 9. 5.
css 기초3 가상 클래스 hover,active,nth-child 등 # 가상 클래스 1.HOVER ABC:hover 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택 좀 더 쉽게 표현하자면, ABC요소에 대해서는 마우스 오버가 되어있는 동안에는 작동된다. 예시 a:hover 2.ACTIVE ABC:active 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 hover와 다른점은 마우스 오버가 아닌 ‘클릭’이라는 점이다. 예시 a:active 3.FOCUS ABC:focus 선택자 ABC 요소가 포커스 되면 선택 이것도 기본 기능은 active와 동일하다. 차이점은 input의 경우 정보 입력을 위해 마련된 공간안에서 쓰인다는 점 같고 active의 경우는 하이퍼링크 같은 원리로 작용하는 것 같다. 다시 말해서 focus는 활용이 가능한 요소인 input등에.. 2022. 9. 5.

티스토리툴바