[CSS] display - block-level, inline, none, hidden

display : 요소가 화면에 보여지는 방식을 지정 html 태그 : 컨테이너. 칸 전체 코드 : 텍스트 일부분. 특정 단어나 특정 부분 코드 css 속성 block-level element : 항상 새로운 line에서 시작 : 요소들이 각각 라인을 차지(자동 줄바꿈) span { display: block; } inline element : 필요한 만큼만 공간 차지(줄바꿈 직접 해야 함) span { display: inline; } display : none : 화면에 보여지지 않음. 공간 차지 X span { display: none; } visibility : hidden : 화면에 보여지지 않음. 공간 차지 O span { visibility: hidden; }

• format_list_bulleted Front-end/CSS
• · 2023. 11. 11.
• textsms

[CSS] 선택자(Selector) - class, id, 우선순위

모든 요소(*) : 모든 유형의 요소 css - * { 효과; } * { color: red; } 태그(tag) 이름 : html에서 사용하는 태그의 이름 html - css - 태그이름 { 효과; } h1 { font-family: cursive; } 속성(attribute) 이름 : 특정 속성이 포함된 요소를 지정 css - [속성이름] { 효과; } [href]{ color: magenta; } 특정 요소에서 특정 값을 가진 요소들에게 각각 다른 효과를 주고 싶다면, css - 요소이름[속성이름*=값] { 효과; } img[src*='winter'] { height: 50px; } img[src*='summer'] { height: 100px; } class (클래스) : 특정 요소만 선택하고 싶을..

• format_list_bulleted Front-end/CSS
• · 2023. 3. 25.
• textsms

[CSS] 글자 크기 변경 속성 - font-size

글자 크기 변경 속성 - 글자 크기 바꾸고 싶을 때 사용 - px 단위, % 단위, 상대적인 크기 전부 사용 가능 font-size: 크기; CSS JavaScript HTML 삽입 미리보기할 수 없는 소스

• format_list_bulleted Front-end/CSS
• · 2023. 3. 25.
• textsms

[CSS] 글자 꾸밈 속성(꾸밈 제거, 밑줄 긋기) - text-decoration

글자 꾸밈 속성 - 글자를 꾸미는 장식을 넣을 때 사용 - 글자 꾸밈을 제거하고 싶을 때는 none; 넣기 text-decoration:효과; CSS HTML 삽입 미리보기할 수 없는 소스

• format_list_bulleted Front-end/CSS
• · 2023. 3. 25.
• textsms

[CSS] 글자 색 변경 속성 - color

글자 색 변경 속성(color) - 글자 색 변경할 때 사용 color:색; CSS HTML 삽입 미리보기할 수 없는 소스

• format_list_bulleted Front-end/CSS
• · 2023. 3. 25.
• textsms

[CSS] CSS란?, 작성 방법

CSS - Cascading Style Sheets - 웹페이지 디자인을 위한 언어 - HTML이 정보 전달에만 전념할 수 있도록 함 인라인 스타일(inline style) style 속성 이용 - html 코드 내에서 직접 css 코드 작성 - 속성의 값을 웹브라우저가 css의 문법에 따라서 해석하여 그 결과를 style 속성이 위치하고 있는 태그에 적용 - 선택자 필요 없음 - 2개 이상 스타일 지정할 때는 세미콜론으로 구분 - 자주 사용되지는 않음 CSS 내부 스타일시트(internal stylesheet) 태그 이용 - 내부에 style 태그 추가 선택자(Selector) - 스타일을 지정할 요소 선언 블록(Declaration Block) - css 선언을 포함하는 중괄호{ } 사이의 코드 선언..

• format_list_bulleted Front-end/CSS
• · 2023. 3. 25.
• textsms