본문 바로가기

전체 글127

[html/css] 선택자 뿌수기!!(후손선택자 / 자손선택자 / 동위선택자 / 속성선택자 / 반응선택자 / 구조선택자 / 형태구조선택자 / 상태선택자 / 시작문자선택자 / 가상요소 선택자) 후손선택자후손 선택자는 부모안의 자식들을 선택하는 선택자를 말한다. 부모 안의 자식들을 선택할 때, 공백으로 표기한다.부모태그 자식태그{속성명: 속성값;}ex) div p{color: blue;}더보기 후손선택자의 사용방법을 보기 위해 예시를 하나 만들어 보겠다. 박스1 /박스1-스판태그/ /박스1-첫번째-P태그/ /박스1-두번째-P태그/ 박스2 /박스2-스판태그/ /박스2-첫번째-P태그/ /박스2-두번째-P태그/ (예시1) 박스1 /박스1-스판태그/ /박스1-첫번째-P태그/ /박스1-두번째-P태그/.. 2024. 6. 11.
[html/css] 목록 스타일 속성 꾸미기 / List-style-type 목록 스타일 속성  목록 태그 앞에 붙는 불릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어 할  수 있다. list-style 속성을 쓰면 type과 position을 한꺼번에 선언할 수 있다.   목록 태그를 들여쓰기 혹은 내여쓰기하는 속성이다. List-style-position    : 목록태그의 들여쓰기 부분List-style-position: inside; (불릿이나 숫자를 안쪽으로 들여쓰기)List-style-position: outside; (불릿이나 숫자를 바깥쪽으로 내여쓰기) ul의 불릿이나 ol의 숫자를 다양한 형태로 바꿀 때 사용한다.  List-style-type: disc (●)List-style-type: circle (○)List-style-type: square (■)List.. 2024. 6. 11.
[css] 드레그 했을 때 글자 배경과 글자 색 바꾸는 방법 드레그 했을 때 글자 배경과 글자 색 바꾸는 방법보통 전체선택자 밑에 작성한다. 배경색과 글자 색을 지정해주면 색이 변한다.::selection{속성값;} 2024. 6. 11.
[html/css] Overflow와 Scrollbar 꾸미기 overflow  박스 안의 컨텐츠가 많아 범위를 넘어갈 때 사용하는 속성이다.hidden, scroll, visible, auto, initial, inherit 과 같은 속성값을 사용해 범위밖을 보여줄 방식을 정한다.overflow: hidden; ★★★        height 속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨긴다.   만약 height 속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어난다.overflow: scroll; ★★★영역을 벗어나는 부분은 스크롤 바가 나타나게한다.overflow: visible;기본값으로, 영역에서 벗어난 부분을 그대로 보여준다.overflow: auto; ★박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여준다.overflow: initi.. 2024. 6. 11.
[figma] 프로퍼티(properties)를 활용하여 내용 쉽게 수정하기 Properties 적용 전예시 만들기  프로퍼티를 활용하기 위해 예시를 먼저 만들어 보았다.1. 체크박스 두개를 만들어 컴포넌트화 한다.2. 제목, 내용을 묶어 오토레이아웃을 만든다.3. 빈 체크박스와 텍스트 레이아웃을 묶어 오토레이아웃을 만든다.4. 만든 레이아웃을 hug와 fill, margin 등을 적절히 조정한다.5. 만들어놓은 전체 레이어를 컴포넌트화 한다.만드는 자세한 방법 클릭Layer Propertycheck-list에서 텍스트 '내용'을 클릭하면 우측에 Layer에 Create boolean property가 뜬다.Create boolean property를 클릭하면 Name과 Value를 지정할 수 있다.☑ Name은 앞으로 프로퍼티를 구분하는 이름이다.     이곳에서는 Show d.. 2024. 6. 10.
[html/css] 반응형을 만들 때 많이 사용되는 상대 단위 1. 퍼센트(%)부모 박스 영역에서 주어진 퍼센트(%) 만큼의 영역을 차지한다. 2. vw, vhviewport width, viewport height의 약자로 보이는 화면을 기준으로 백분율(%)하여 적용한다. 3. vmax, vminviewport의 최대, 최소 넓이를 기준으로 하는 단위로, vw vh를 합친 단위이다.vmax는 vw와 vh 중 더 큰 값을 기준으로 하고, vmin 은 더 작은 단위를 기준으로 한다.위의 세 단위중에서 가장 활용도가 낮은 단위이다. 2024. 6. 10.