'CSS' 카테고리의 글 목록 (2 Page)

프로필사진

FE_Log

JunO3O

검색

분류 전체보기 (50)

태그 목록

CSS 단위 그레이디언트 css 상태 선택자 vscode 아이디 선택자 입력 양식 글자 생략 목록태그 유동 속성 태그 선택자 구조 선택자 속성 선택자 자손 선택자 one true 레이아웃 글자태그 후손 선택자 공간 분할 배경 속성 수평 레이아웃 요소 배치 html 글자 속성 박스 속성 display 속성 위치 속성 Udemy the web developer bootcamp 중앙 레이아웃 반응 선택자

즐겨찾기

Copyright © Design Maker - vlo.

'CSS' 카테고리의 글 목록 (2 Page)

댓글수 · 2023.03.21

글자 속성 ㅁ 글자 크기 지정 : 글자 크기를 지정하는 font-size 속성에는 크기 단위나 키워드를 입력할 수 있습니다. : 글꼴을 지정하는 font-family 속성에는 사용자 컴퓨터에 설치된 글꼴을 입력할 수 있습니다. ㅁ 글자 크기 조정하기 : HTML 페이지에서 p 태그의 기본 크기는 16px인데 이것을 font-size 속성을 통해 변경할 수 있습니다. font-size 비교하기 32px 크기는 이렇습니다. 2em 크기는 이렇습니다. large 크기는 이렇습니다. small 크기는 이렇습니다. ㅁ 글꼴 사용하기 Arial 글꼴을 지정합니다. roman 글꼴을 지정합니다. ㅁ 글꼴 여러 개 사용하기 : 설정한 글꼴이 컴퓨터에 없는 경우를 대비해 여러 글꼴을 적용할 수 있습니다. Arial 글꼴..

댓글수 · 2023.03.21

배경 속성(background) : 배경에 이미지나 색상을 입력할 경우 배경 속성을 사용해 지정합니다. 속성 설명 background-image 배경 이미지 삽입 background-size 배경 이미지의 크기 지정 background-repeat 배경 이미지의 반복 형태 지정 background-attachment 배경 이미지의 부착 형태 지정 background-position 배경 이미지의 위치 지정 background 한 번에 모든 배경 속성 입력 ㅁ 배경 이미지 삽입 및 크기 지정 : background-image 속성은 배경 이미지를 지정하는 속성으로 스타일 값에는 URL 단위나 그레이디언트를 입력합니다. : 배경 이미지 크기는 background-size 속성으로 조정하고 크기 단위나 키워드..

가시 속성(display)

댓글수 · 2023.03.21

가시 속성 : 가시 속성은 태그가 화면에 보이는 방식을 지정하며, 대표적으로 display 속성이 있습니다. : 아래와 같이 사용합니다. #box { display : none; /* none, block, inline, inline-block 등이 있습니다. */ } 키워드 설명 none 화면에 보이지 않음 block 블록 박스 형식으로 지정 inline 인라인 박스 형식으로 지정 inline-block 블록과 인라인의 중간 형태로 지정 # display 속성 : display 속성에 none 키워드를 적용하면 태그가 화면에서 보이지 않습니다. : 즉, 중간에 있는 div 태그 전체가 화면에서 사라집니다. ㅁ none 키워드 예시 1 display를 none로 설정하면 화면에 보이지 않습니다. 예시 2..

댓글수 · 2023.03.21

박스 속성 # 박스 속성 ㅁ 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 부분으로, CSS에서는 각 요소가 박스라는 영역을 생성하고, 이 영역을 둘러싼 테두리에 크기, 색상, 위치 등 관련된 속성을 지정함으로써 스타일을 변경하는 방식입니다. - margin : 테두리와 다른 태그 사이의 테두리 바깥쪽 여백 - border : 테두리 - padding : 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용 - width : 글자를 감싸는 영역의 가로 크기 - height : 글자를 감싸는 영역의 세로 크기 ㅁ width와 height 속성 적용 test ㅁ margin과 padding 속성 적용하기 test ㅁ margin 속성 / padding 속성의 방향 적용..

댓글수 · 2023.03.21

CSS 단위 ㅁ 스타일 속성을 적용하려면 스타일 값으로 입력할 수 있는 css 단위를 알아야 합니다. ㅁ 하지만 사용하는 단위가 많기 때문에 그때그때 필요한 단위를 찾아쓰는 연습을 하는 것이 중요하다고 생각합니다. 단위 설명 % 백분율 단위 em 배수 단위 px 픽셀 단위 # % 단위 ㅁ % 단위는 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정합니다. 1 단위를 연습합니다. 2 단위를 연습합니다. 3 단위를 연습합니다. # em 단위 ㅁ em 단위는 배수를 나타내는 단위입니다. 1배는 1em이고, 이는 100%와 같습니다. 마찬가지로 2배는 2em이고, 200%와 같습니다. 1 단위를 연습합니다. 2 단위를 연습합니다. 3 단위를 연습합니다. # px 단위 ㅁ 앞에 있는 % 단위와 em 단위는 크..

반응 / 상태 / 구조 선택자

댓글수 · 2023.03.21

반응 / 상태 / 구조 선택자 # 반응 선택자 ㅁ 반응 선택자는 사용자 반응으로 생성되는 특정한 상태를 선택합니다. ㅁ 사용자가 특정 태그 위에 마우스 커서를 올리면 hover 상태이고, 특정 태그를 마우스로 클릭하면 active 상태입니다. 형태 설명 :active 사용자가 마우스로 클릭한 태그 선택 :hover 사용자가 마우스 커서를 올린 태그 선택 ㄴ> h1:hover 형식으로 붙여서 작성해야 하며, h1 : hover 처럼 태그와 선택자를 띄어쓰기를 통해 작성하면 안됩니다. 반응 선택자 # 상태 선택자 ㅁ 상태 선택자는 입력 양식의 상태를 선택할 때 사용합니다. ㅁ 어떤 상태인지 알아야 상태 선택자를 쉽게 사용할 수 있습니다. 형태 설명 :checked 체크 상태의 input 태그 선택 :focu..

후손 선택자 / 자손 선택자

댓글수 · 2023.03.21

후손 선택자 ? 자손 선택자 ? # 부모 / 자손 / 후손 선택자 css 선택자 기본 선택자 전체 선택자 태그 선택자 아이디 선택자와 클래스 선택자 ㄴ> div 태그를 기준으로 div 태그는 부모 선택자가 되고, h1 태그와 h2 태그 그리고 ul 태그를 자손 선택자라고 하며, div 태그 아래에 위치한 모든 태그(자손 선택자 포함)를 후손 선택자라고 합니다. # 자손 선택자 ㅁ 자손 선택자는 특정한 태그의 자손을 선택할 때 사용합니다. 형태 설명 선택자 a > 선택자 b 선택자 a의 자손인 선택자 b 선택 ㅁ 부모 바로 아래 있는 태그에 대해서 스타일을 적용합니다. 자손과 후손을 구별할 줄 알아야 합니다. 여기보세요~ 네비게이션 타이틀입니다. 문단 안에 작성한 글입니다. # 후손 선택자 ㅁ 후손 선택자..

속성 선택자

댓글수 · 2023.03.21

속성 선택자 ㅁ 속성 선택자는 아래 표와 같은 형태로 입력하며, 특정 속성과 값이 있는 태그를 선택할 때 사용합니다. ㅁ 대괄호 [ ] 를 사용해 입력합니다. 형태 설명 선택지[속성] 특정한 속성이 있는 태그 선택 선택지[속성 = 값] 특정한 속성 내부 값이 특정 값과 같은 태그 선택 # 속성 선택자 ㅁ 속성 선택자를 사용해 input 태그를 선택할 수 있습니다. ㄴ> input을 통해 [type="속성"] 을 선택하여 속성 선택자를 이용할 수 있습니다.

1 2 3

티스토리툴바