코딩/CSS 4

문자 관련 스타일의 모든 것을 알아보자.

🥴🥴 오늘은 좀 힘든 날이었어요. 자바스크림트 함수가 좀처럼 이해가 안되서..하지만 화이팅 해봅니다! 문자 관련 스타일에 대해서 알아보려고 합니다. 종류가 많은 만큼 간략하지만 정확하게 정리해보도록 하겠습니다.🤫 문자 관련 스타일 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, Arial, Helvetica, san-serif; 02. font - size와 단위 문자의 크기를 지정하는 속성입니다. 크기를 명시하지 않을 경우 16px기본입니다. CSS에서 사용하는 단위는 다음과 같습니다. 👉..

코딩/CSS 2023.03.01

CSS의 선택자! 기본 14가지!

안녕하세요.🥰🥰🥰 지난시간에 id선택자와 class선택자를 알아보았는데요. 오늘은 나머지 선택자를 알아보도록 하겠습니다. 선택자의 개념! 지난 시간에 했던 것이지만 다시 한 번 복습해보겠습니다. 선택자란, CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 개념을 정리 했으니 바로 살펴보도록 하겠습니다.😘 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 2. id 선택자 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있는데 HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. 3. class 선택자 여러 개의 요소에 같은 class명을 부여할 수 있습..

코딩/CSS 2023.02.24

CSS의 기초! ID와 Class의 차이점

안녕하세요.🥰 지난 게시물에서는 CSS의 스타일에 대해서 알아봤는데요. 오늘은 '선택자(selector)에 대해 알아보겠습니다. 선택자란 CSS로 UI의 어느 부분을 디자인 할 지, 즉 표현할 대상이 되는 부분을 말합니다. 아래 이미지를 살펴보겠습니다. CSS를 배우지 않았더라도 어림짐작은 할 수 있죠. 예를 들어 H는 헤더라던가, color는 색이라던가. 맞습니다만, 이런 명칭을 CSS에서는 이렇게 정의해주고 있습니다. 어렵지 않죠? { }안에 여러 속성을 지정할 수 있고, 각 속성 설정간에는 ;로 구분해줍니다. 이제 자연스럽게 선택자에 대해 알아보려고 합니다. 우리가 정확하게 알아야할 선택자는 2가지인데요. 바로 id 선택자와 class선택자입니다. 얼핏보면 비슷하고 하는 일도 비슷한 친구들인데 알아..

코딩/CSS 2023.02.21

CSS를 표현할 수 있는 스타일 세 가지를 알아보자!

CSS (Cascading Style Sheets )에는 세 종류가 있습니다. 내부 스타일시트, 외부 스타일 시트, 인라인 스타일입니다. 내부 스타일 시트 css 파일을 따로 생성하지 않고 HTML의 문서 안에 외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방식입니다. 이 때 스타일은 *.css확장자를 가진 별도 파일로 저장하고, HTML에서는 태그를 이용하여 선언해주어야 합니다. 외부 스타일시트 코딩공부 스타일 파일을 연결해주어야합니다. 결과는 상단과 동일합니다. @import 도 사용 가능합니다. @import는 CSS안으로 다른 CSS 파일을 불러들일 경우 사용하며 CSS 맨 윗줄에 기술합니다. 스타일 시트 포함 . . 코딩공부 역시 결과값은 같습니다. 인라인 ..

코딩/CSS 2023.02.20