'css' 태그의 글 목록 (2 Page)

프로필사진

FE_Log

JunO3O

검색

분류 전체보기 (50)

태그 목록

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

즐겨찾기

Copyright © Design Maker - vlo.

'css' 태그의 글 목록 (2 Page)

가시 속성(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="속성"] 을 선택하여 속성 선택자를 이용할 수 있습니다.

기본 선택자

댓글수 · 2023.03.21

기본 선택자 종류 형태 설명 전체 선택자 * HTML 페이지 내부의 태그를 모두 선택 태그 선택자 태그 HTML 페이지 내부의 특정 태그를 모두 선택 아이디 선택자 #아이디 특정 id 속성이 있는 태그 선택, 웹 표준에 id 속성은 웹 페이지 내부에서 중복되면 안된다는 규정이 있으므로 아이디 선택자는 특정 태그 하나를 선택할 때 사용 클래스 선택자 .클래스 특정 클래스가 있는 태그 선택 # 전체 선택자 사용하기 ㅁ 전체 선택자는 모든 태그의 color 스타일 속성을 동일한 값으로 변경합니다. 제목 글자 태그 전체 선택자 연습하기. # 태그 선택자 적용하기 ㅁ 만약 h1 태그의 color 스타일 속성에 green 값을 적용하고, p 태그의 color 스타일 속성에 orange 값을 적용하려면 아래와 같이 ..

댓글수 · 2023.03.21

CSS 선택자 # 선택자 ㅁ 특정 HTML 태그를 선택할 때는 선택자를 사용합니다. ㅁ 선택자를 사용해 특정 HTML 태그를 선택하면 선택한 태그에 원하는 스타일이나 스크립트를 적용할 수 있습니다. ㅁ 아래와 같이 선택자, 스타일 속성, 스타일 값을 지정합니다. h1 { /* h1 은 선택자입니다. */ color : green; /* color 은 속성입니다. */ } /* green 은 스타일 값 입니다. */ ㅁ style 태그 내부에 css 블록을 넣어 작성한 코드를 스타일시트라고 합니다. CSS 선택자를 공부합니다. ㄴ> h1 태그의 color 스타일 속성에 스타일 값을 green으로 준다 ! 라는 뜻입니다. # 선택자 종류 ㅁ CSS 선택자는 스타일시트뿐만 아니라 자바스크립트에서도 사용하는데 ..

티스토리툴바