본문 바로가기

CSS25

css flex css flex #1 배경 flex는 기본적으로 “여러 태그를 하나로 묶어서 정렬”하는 것이다.javascript를 비롯해 컴퓨터 언어는 “내 눈에 보이는”곳으로 이동할 수 없다.따라서, 중앙에 놓고 싶다면 가로세로, 혹은 세로 가로로 규정을 해줘야한다.  #2 활용display: flex;묶음 설정된 태그들을 수평으로 나열해준다. 자식으로 따라오는 것들을 수직으로 나열하면flex-direction: column; 자식으로 따라오는 것들을 수평으로 나열하려면flex-direction: row; 가운데 수평기준으로 정렬justify-content: center; 가운데 수직기준으로 정렬align-items: center; #3 심화 좀 더 살펴보자면flex-direction, justify-content는.. 2025. 1. 20.
css 기초 #1 기초 "어떤 항목"을 제어해줄지 결정하는 것을 "속성""어떻게" 제어할지 결정 하는 것을 "값"이라고 한다. #2 css 선택자 * - 전체 선택자. - 클래스 선택자# - id 선택자 보통* {}.container {}#userId {}이런식으로 쓰인다. #3 컨셉 css가 적용되는 html은 모두 "박스 형태"로 이루어져 있다.이를 다루기 위해서는 몇가지 개념을 알아야한다. margin - 박스의 바깥 여백border - 박스의 기준이 되는 바깥 테두리padding - 박스의 안쪽 여백contents - 박스의 내용 디자이너와 협업시1) border-boxborder가 고정된다.액자 틀 느낌으로 생각하면된다.액자 틀의 크기는 예를들어 40x50으로 고정 되어있는데, 무언가 크기 변화를 주려고 하.. 2025. 1. 16.
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.

티스토리툴바