본문 바로가기

Web/Css29

CSS - padding의 재발견 (클릭 영역) padding은 단순히 content 라인 바로 안쪽의 사이즈를 늘려주는 "채움"요소라고 생각했다. (통상 우리가 아는 패딩의 충전재 같이) 하지만 padding의 크기에 따라서 좌우되는 것이 한가지 더 있었다. 바로 "클릭 영역"이였다. 만약 padding이 0 상태이거나 none상태라면, 사용자들은 딱 글자 영역 안에 마우스를 넣고 클릭해야 작동이 되지만 padding을 넣게되면 padding만큼의 영역이 추가연장 영역이라고 생각하면 된다. 그만큼 클릭에도 용이한 부분이 있다. (각각의 카테고리가 겹치는 일은 없으니 걱정은 ㄴㄴ) CSS는 기초가 모자라도 너무 모자라서 다시금 배우고 있는데, 날마다 새로운것들을 배워간다는 것이 좋다. 2023. 1. 9.
CSS - 선택자(first-child, last-child, nth-child)N번째에 css 적용 CSS - 선택자 #1 첫번째 자식요소에 적용 .class:first-child { } 이것의 의미는 해당하는 클래스안에 들어있는 자식 요소중 첫번째 자식에게만 내용을 적용하겠다는 의미 코드 예시로는 첫번째 두번째 이렇게 있으면 .box1 p:first-child { } 이런식으로 적용 하지만 예외 사항이 있다. hello davy 만약 이렇게 있는 상황에서 .container p:first-child { background-color: red; } 라고 한다면 hello, davy중에서 어느것도 적용되지 않는다. 왜냐하면 ~child요소는 p중에서 첫번째 자식 이라기보다는 정확한 의미로는 container 클래스에 들어있는 첫번째 요소가 p여야 하고 그 p중 첫번째에 내용을 적용한다. 정도로 이해하면 .. 2023. 1. 8.
CSS - 중앙 정렬(완전 정중앙x)관련 활용 코드1 정 중앙 정렬 - 실패 하지만 외 적으로 유의미한 활용 코드가 있어서 주석과 함께 가져왔다. # index.html 나만의 일기장 나만의 일기장입니다. 원하는 색과 사이즈로 일기장을 커스텀 해보세요. have a Good Day😀 🌂쭈꾸미의 일기(제목) 오늘은 김치찜을 먹었다(내용) 내일은 이나니와 요스케를 먹고싶다. 2022년 7월 5일 날씨 흐림⭐️ # index.css * { box-sizing: border-box; margin: 0; padding: 0; } div.container { background-color: aquamarine; /* 수평정렬 셋트 start */ display: flex; flex-direction: row; justify-content: center; align-i.. 2023. 1. 7.
(*매우중요) CSS - block요소, inline요소 (*매우중요) CSS - block요소, inline요소 #1 block요소 1)특징 -블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음 줄로 넘어간다. -좌/우 양쪽으로 늘어나서 부모 요소의 너비를 가득 채운다. -width, height 값은 box를 기준으로 먹여지는 값이다. block요소에는 적용된다. -display에 속성을 부여해서 block -> inline, inline -> block으로 변환이 가능하다. 예: display: inline; 그러면 이 명령이 유효한 한에서는 block요소도 inline요소로 속성이 적용된다. -vertical-align이 적용되지 않음 -test-align이 적용되지 않음 2)태그들 address, article, aside, audio, block.. 2023. 1. 7.

티스토리툴바