목록HTML & CSS/CSS (6)

조각조각 노트 정리

[CSS] Responsive Web(반응형 웹) - Media Query

1. 반응형 웹이란? 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동을 변하는 웹사이트를 의미한다. IT 기기의 종류가 많아짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요해졌다. 2. Media Query 반응형 웹을 구현하는 방법중 하나인 Media Query에 대해 설명하고자 한다. media query란 반응형 웹을 구현하는 CSS 기술이다. '@media'라는 문법으로 작성하며, 특정 조건에서 어떤 CSS를 적용하는 규칙을 적용할 수 있다. @media : 미디어 쿼리를 시작할 때 쓰는 키워드이다. only screen : 어떤 디바이스에서 적용하는지 알려준다. and (max-width : ...
HTML & CSS/CSS 2023. 6. 29. 15:29
[CSS] <input> 클릭 시 생기는 테두리 제거, 색상변경

박스를 클릭했을 때 원하지 않는 테두리가 생기는 것을 볼 수 있다. 이 테두리를 없애고 싶다면 :focus 의사클래스를 사용해야한다. :focus 의사클래스란? 입력 폼을 클릭한 상태를 의미한다. 따라서 클릭되었을 때 테두리를 없애고 싶으면 outline 속성을 none으로 작성해주면 된다. input:focus {outline:none;} 클릭했을 때 테두리 색상 변경하기 input:focus {outline:2px solid #aaa;}
HTML & CSS/CSS 2023. 6. 29. 15:08
[CSS] Margin & Padding

1. Margin : border 바깥쪽 여백 margin은 padding과 달리 속성값으로 음수(마이너스값)를 사용할 수 있다. 속성값으로 auto를 사용할 수 있다. 2. Padding : border 안쪽 여백 3. Margin & Padding 값 작성 순서 margin 혹은 padding : 전체 ; margin 혹은 padding : 위&아래 왼쪽&오른쪽 ; margin 혹은 padding : 위 왼쪽&오른쪽 아래 ; margin 혹은 padding : 위 오른쪽 아래 왼쪽 ; (✔︎인라인 요소에서 위와 아래 여백은 효과가 없음) 참고사이트 https://developer.mozilla.org/ko/docs/Web/CSS/margin
HTML & CSS/CSS 2023. 2. 6. 14:24
[CSS] font 속성

font는 css에서 글꼴을 정의 하는 속성이다. tont의 속성은 다음과 같다. font : 모든 font 속성을 이용한 스타일은 한 줄에 설정할 수 있다. font-style : 이탤릭체와 글자의 기울기를 설정함 font-variant : 글자의 대소문자 글꼴 변형 font-weight : 글자의 두께 font-size : 글자 크기 font-hight :줄 간격 font-family : 여러 글꼴들의 우선 순위를 지정하여 첫번째 폰트가 없을 경우 차선택을 할 수 있도록 유도하는 속성이다. font 속성은 다음과같은 순서로 세부 속성을 한번에 기술한다. font: font-style font-variant font-weight font-size/line-height font-family 1. font..
HTML & CSS/CSS 2023. 2. 1. 14:37
[CSS] css 작성법 - 선택자

1. CSS 작성법 위에서는 css를 어떻게 적용시키는지 알아보았으니, 이제는 css 작성법을 살펴보고자 한다. 스타일을 적용할 태그나 이름을 선택자(selector)로 지정하고, 어떤 스타일을 적용 시킬지 작성한다. 선택자 (selector) : 선택자 자리에는 태크, 클래스, 아이디가 올 수 있다. 속성 (property) : 속성은 선택자에 어떤 효과를 넣을지 적는 자리이다. 속성 값 (property value) : 속성 값은 선택자에 적용시킬 효과에 대한 디테일값을 적는 자리이다. 속성 값을 적을 때는 세미클론(;)으로 구분지어 준다. 선언부 (declaration) : 속성과 속성 값이 있는 부분을 선언부라고 한다. 1-1. tag name 모든 태그들에게 속성(property)을 적용시킬 수..
HTML & CSS/CSS 2023. 2. 1. 14:31
[CSS] css 적용

CSS란? CSS란, HTML태그에 디자인을 입혀주는 언어이다. 1. CSS의 등장 초반 HTML를 이용하면서 사람들은 태그를 디자인해 꾸며주고 싶어졌다. 처음엔 기존 HTML태그를 가지고 디자인적 기능을 가진 태그를 만들어 사용하였다. 하지만 그로 인한 문제점이 생기는데, 정보 태그들과 디자인 태그(정보가 아닌 태그)가 섞이면서 웹페이지가 정보로써의 가치가 떨어지는 문제점이 생겼다. 정보 태그와 디자인 태그의 구분이 필요해지면서 나타난 언어가 바로 CSS이다. 따라서 CSS와 HTML을 사용할 때는 컴퓨터한테 CSS(디자인)와 HTML(정보,구조)을 구분 지어 명령해야 된다. 2. CSS적용 CSS를 HTML에 작용되도록 반영하는 방법은 3가지가 있다. 2-1. 인라인 스타일 (inline) 태그에 s..
HTML & CSS/CSS 2023. 1. 26. 14:30
이전 Prev 1 Next 다음