Bomb Kirby Running

CSS 7

문자 관련 스타일 알아보기

문자 관련 스타일은 font-family, font-size, font-weight, font-style, font-variant, line-height, font, 웹폰트, color, letter-spacing, word-spacing, text-decoration,text-transform, text-shadow의 속성이 있습니다. 먼저, font family부터 알아보겠습니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감쌉니다. 여러 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ; font-size..

CSS 2023.03.01

grid 알아보기

gird를 왜 사용하는가? 전 글에서 flex와 마찬가지로 앞으로 활용도가 높아질 것을 대비해 간단히 사용법을 알려드리려고 합니다. grid layout 비교적 지관적이여서 다른 레이아웃보다 사전지식이 덜 필요합니다. 행과 열의 크기, 셀 간격, 정렬 등을 원하는 대로 설정할 수 있습니다. 미디어 쿼리를 사용하여 화면 크기에 따라 그리드의 구성을 다르게 설정 하여 반응형 레이아웃을 쉽게 구현할 수 있습니다. 그리드를 사용하면 HTML 요소의 구조를 더욱 간결하게 표현할 수 있습니다. 다음은 그리드 사용 예시를 들어보겠습니다. 예시 만약 다음과 같은 레이아웃형태를 만든다고 하면 저는 바디 부분을 이렇게 만들었습니다. grid를 사용하기 때문에 div요소를 줄여쓸 수 있습니다. #header { grid-a..

CSS 2023.03.01

flex에 대해 알아보기

왜 flex를 사용하는가? 전에 레이아웃 구성할 때 float을 알려드렸는데, 앞으로는 브라우저 이슈들이 개선되어 가까운 미래에 flexbox 방식을 즐겨 쓰는 날이 올 것 입니다. 아직은 최신 브라우저들에서만 실행되지만 곧 일어날 변화들을 위해 flex 방식을 알아보겠습니다. flex layout 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것을 말합니다. flex를 선언은 아래와 같습니다. dispaly: flex; flex-direction 자식요소를 나열하는 뱡향을 지정하는 속성입니다. 부모요소에게 지정합니다. 속성 값 속성 설명 column 위에서 아래로 나열 column-reverse 아래에서 위로 나열 row(기본..

CSS 2023.03.01

CSS 선택자 알아보기

type선택자 CSS Type Selector는 HTML 요소의 태그 이름을 사용하여 스타일을 적용하는 선택자입니다. 예를 들어, 모든 p 요소에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다. p { color: blue; } 위의 예제에서 "p"는 선택자이며, 이 선택자는 모든 "p" 요소를 선택합니다. Type Selector는 다른 선택자와 함께 사용하여 더 정확한 선택을 할 수 있습니다. 예를 들어, 클래스 선택자와 Type Selector를 결합하여 클래스가 "my-class"이고 태그 이름이 "p"인 요소를 선택하려면 다음과 같이 작성할 수 있습니다. p.my-class { color: red; } id 선택자 (ID Selector) id 선택자는 HTML 요소의 id 속성을 사용하여..

CSS 2023.02.26

float에 대해 알아보기

float을 왜 활용하는가? 블록요소는 원래 세로로만 나열되지만 float을 사용하면 가로로 배치 할 수 있습니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다. float 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게하는 속성입니다. float 한 박스에 가로 사이즈를 지정해주어야 크로스브라우징됩니다. 인라인 요소들은 가로사이즈 없이 float 해도 레이아웃이 흐트러지지 않습니다. float을 취소할 때에는 float: none;을 합니다. float: left; 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 합니다. 예시 이미지를 보시면 아래로 나열되어야 할 콘텐츠를 우측 옆에서 흐르도록 배치해 줍니다. float: right; 요소를 오른쪽에..

CSS 2023.02.25

CSS 선택자 class와 id의 차이점 알아보기

선택자(selector) 먼저,선택자란? CSS의 UI로 표현할 대상이 되는 부분을 말합니다. CSS 속성부여 형식은 다음과 같습니다. h1 { color : red; background : yellow;} 선택자 {속성:속성값; 속성:속성값;} 선택자의 종류는 type 선택자, id 선택자, class 선택자 등이 있습니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 땐 중복하지 말고 유일한 이름을 부여해야 합니다. CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. 다음 예제에서 id가 txt인 p요소는 스타일이 지정되지 않았으므로 지정된 ctxt만 파란색으로 표시됩니다. See the Pen..

CSS 2023.02.21

CSS 표현방법

CSS 표현방법 CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 내부 스타일시트 간단한 스타일은 내부 스타일 시트만으로도 사용할 수 도 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용됩니다. css HTML 문서 안에 태그를 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태 입니다. 우리를 기쁘게 하는 것들. 외부 스타일시트 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 우리를 기..

CSS 2023.02.20