🎨 [UIUX] 1126 CSS Coding, 코딩 기초 1

You_Jin.·2024년 11월 26일

CSS CSS style Coding UIUX css 선택자 css-class css-id uxui 비주얼스튜디오코드 코딩 코딩 기초

✏️ 2024. 11월 26일 / CSS 언어, 코딩 기초 1

✨ CSS 언어 기초 - Visual Studio Code
✖️
이번 포스팅부터는 CSS 언어를 함께 공부하려합니다.
css란 Cascading style sheets입니다.
css는 위에서 아래로 흐르는 스타일 시트, 라고도 부르는데요.
그 이유는 아래에 써져있는 내용이 더 먼저 적용된다는 특징 때문입니다.
html이 문서의 뼈대를 만든다면 CSS는 뼈대에 디자인을 입히는 언어입니다.
CSS문법을 쓸 때에는 선택자가 가장 먼저 등장하고 그 다음 {}(중괄호)안에 속성과 속성값을 :(콜론)으로 구분하여 나열합니다.
하나의 속성 선언이 끝나면 ;(세미콜론)으로 문장의 마침표를 찍어주어야 합니다.

🎈 CSS 언어 기초 - 스타일과 스타일시트
✖️
웹 문서에서 미리 만들어진 스타일 속성을 입력하여 웹 페이지를 디자인 하는 것을 '스타일'이라고 합니다.
즉, CSS문법을 이용해서 속성과 속성값을 입력한 한 줄을 스타일이라고 합니다.
스타일 시트란 수많은 CSS 속성과 값이 모인 하나의 문서를 뜻합니다.
스타일 시트는 사용하는 방법에 따라 크게 3가지로 나눠집니다.
✒️ 1. 내부 스타일시트 [우선순위 2위]
: html 웹 문서에 <head> 태그 안에 <style>태그를 이용해 CSS를 작성하는 방식을 말합니다.
내부 스타일시트는 html코드와 CSS코드가 길어질 경우 작성과 수정이 불편하고, 파일 크기가 커진다는 단점이 있어 잘 쓰이지 않습니다.
✒️ 2. 외부 스타일시트 ★ [우선순위 3위]
: CSS문서를 만들고 CSS폴더에 따로 분리하여 html과 연결에 쓰는 방식을 말합니다.
기본적으로 실무에서 가장 많이 사용되는 방식으로 문서 관리가 편하고 수정이 편리하다는 장점이 있습니다.
외부 스타일시트를 만들었을때 link태그로 html파일과 연결할 수 있다. link태그는 <head> 태그 안에 써야합니다.
link 태그는 <head>안에 써야 하며 외부 문서(css, 파비콘 등)를 연결할 때 사용하는 태그입니다.

[CSS 파일을 html과 연결하는 기본형]
<link rel="styleseet" href="외부파일경로"/>
- rel : 연결하려는 파일의 형식을 지정하는 속성
- href : 파일 경로
✒️ 3. 인라인 스타일 [우선순위 1위]
: 태그 내부에 style속성을 이용하여 직접 적용하는 스타일을 말합니다.
인라인 스타일은 외부 스타일 시트와 내부 스타일 시트보다 우선순위가 높습니다.
우선 순위가 높다는 말은 이 스타일이 가장 먼저 적용되어 브라우저에 보인다는 뜻입니다.
우선순위가 높은 다른 방식으로 코드 수정이 어렵기 때문에 인라인 스타일은 쓰이지 않습니다.
웹 초창기에 쓰이던 방식입니다.
💿 스타일 시트의 우선순위
1번부터 가장 우선순위가 높다.
1. 인라인 스타일
2. 내부 스타일 시트
3. 외부 스타일 시트

📸 CSS 언어 기초 - CSS의 선택자
✖️
선택자란 css에서 불러온 (선택된) 태그 요소를 말합니다.
선택자는 id, class, 태그선택자로 크게 3가지로 나눠집니다.
id, class는 해당 태그에 특별히 적용할 css 속성이 있을 때 붙여주는 이름을 지정합니다.
선택자에 따라 우선순위가 달라집니다.
id와 class는 태그 안에 쓰는 '속성명'으로, 태그에 이름을 붙여주는 역할을 합니다.
💡 1. 태그선택자
: html태그의 스타일을 적용하는 선택자로 태그에 직접 스타일을 적용합니다.
선택자 자리에 태그의 이름을 그대로 써준 후 {속성:"속성명"}을 나열한다.
태그선택자는 연결된 html파일 안에 동일한 태그가 있으면 공통적으로 동일한 스타일을 적용합니다.
보통 css 초기화 작업에서 많이 사용됩니다.
태그 선택자는 우선순위가 가장 낮다.

💡 2. class선택자
: 특정한 태그에만 스타일을 적용하고 싶은 경우 사용하는 선택자로, 태그에 class="클래스명" 형식으로 이름을 붙여주면 css에서 이 이름을 가진 태그들만 특별한 스타일을 적용할 수 있습니다.
css에서 class선택자를 불러올 때에는 앞에 .을 붙인 후 class의 이름을 붙여서{속성:속성값;}을 씁니다.
두번 째 우선순위를 가지며 제일 많이 사용된다.
class이름을 지을 때에는 의미에 맞게 지어야 하며 class이름은 다른 태그에도 중복사용이 가능합니다.
class이름은 영문 소문자로 작성하며 공백대신 -,_만 사용할 수 있습니다.
또한 이름에 숫자를 붙일 때에는 영문 소문자 뒤에 붙여야 합니다.

💡 3. id선택자
: id선택자도 class처럼 태그에 특정한 css속성을 적용하고 싶을 때 이름을 붙여주는 역할을 한다.
이름을 짓는 방법은 class와 동일하며 class와 다른 점은 id로 지은 이름은 단 한번만 사용이 가능하다는 것이다.
태그에 id속성을 적용할 때에는 id="아이디명"으로 이름을 지어주고,
css에서 이름을 불러올 때에는 앞에 #아이디명 형식으로 불러온다.
id선택자는 선택자 중에서 제일 우선 순위가 높다.

🖨️ CSS 언어 기초 - 다양한 적용값
✖️

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

You_Jin.

🎧 ᴘʟᴀʏɪɴɢ: UXUI (Feat: coding) ─────────⚪───── 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀ ㅤ ◄◄⠀▐▐⠀►► ───○ 🔊

🎨 [UIUX] 1126 CSS Coding, 코딩 기초 1

✏️ 2024. 11월 26일 / CSS 언어, 코딩 기초 1

🖥️ [UIUX] 1126 HTML Coding, 코딩 기초 6

🖥️ [UIUX] 1128 HTML Coding, 코딩 기초 7

0개의 댓글