멋쟁이 사자처럼 <HTML>을 마치고 <CSS>에 들어가다.

250x250

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

Ch.Covelope

멋쟁이 사자처럼 <HTML>을 마치고 <CSS>에 들어가다. 본문

CSS

멋쟁이 사자처럼 <HTML>을 마치고 <CSS>에 들어가다.

Chrysans 2021. 11. 4. 00:47

728x90

<Like_lion> 멋쟁이 사자처럼 </Like_lion>

HTML의 마무리 CSS의 시작.

오늘은 멋쟁이사자처럼(멋사)에서 기본적이고 아주 기초적인 HTML수업을 마무리하고 CSS로 넘어가는 날이었다. 물론 HTML은 앞으로도 계속해서 사용되기 때문에 마무리가 되었다고 해서 끝이 아니고 꾸준히 예습, 복습을 해야겠다.

VScode

금일은 시작하기전 vscode (visual studio code:에디터)에서 수업에 필요한 익스텐션을 설치하였다.

- Html tag wrap-이라는 익스텐션이었고 이름 그대로 주요 기능은 HTML의 tag를 wrapping 해주는 것이다. 원하는 문장이나 단어를 드래그하고 "Alt + W" (맥은"Option+W") 를 누르면 해당 문장, 단어에 <p>TEXT</p> 이런 식으로 <p>태그로 감싸주는 기능이다. 그 이후에 원하는 태그를 써주면 닫는 태그까지 한 번에 바뀌기 때문에 작업 효율성이 극대화되는 아주 고마운 익스텐션들 중에 하나인 거 같다.

익스텐션 설치 후 어제 사이드 과제로 내주신 HTML로 마크업 하기로 한 홈페이지를 함께 작성하면서 어떤 식으로 작성하는 게 보기에 좋을지 유용하고 시멘틱 한 지 자세한 설명들과 함께 진행되었습니다. 완성된 코드는 깃허브에 올렸습니다!

해당 파일 이름 : index.html

https://github.com/chry8822/like_lion_daily/tree/main/like_lion_daily/day4

GitHub - chry8822/like_lion_daily

Contribute to chry8822/like_lion_daily development by creating an account on GitHub.

github.com

금일 HTML 주요 내용

주용 내용은 div, span 태그를 절대 사용하면 안된다는게 아니라 해당 사항에 적절한 태그들이 존재하니 그것들을 이용하고 필요에 따라서는 유연하게 div,span 태그를 이용하자.

인라인 요소와 블록요소의 를 구분할주 알아야 하며 인라인 요소에는 인라인 요소들만 중첩하여 사용하고 블록 요소에는 모두다 사용 가능하다.

대표적인

블록 요소 <article>, <header>, <nav>, <section>, <div>

인라인요소 <span>, <strong>

<section> 태그 안에는 <heading> 태그가 들어가는 게 일반적이지만 행여 보여는 내용이 없어도 일단 <heading> 태그를 사용해서 내용을 작성한다 그리고 후에 안 보이게 처리(삭제가 아닌)를 한다 이는 시각 장애인을 위함으로 스크린리더는 브라우저에서 보이지 않는 내용도 읽기 때문이다.

독립된 주제 거나 똑 띄어내서 다른 곳에 넣어도 문제 되지 않은 콘텐츠는 <article> 태그로 사용한다.

<footer> 안에는 구역을 나누지 않게 되어있다. 하지만 나누는 거처럼 효과를 낼 수 있게 사용되는 태그들이 있다
※<h1~6> 헤딩 태그, <address> 태그, <p> 태그

링크에서 전화번호나 이메일 클릭 시 해당 전화나 이멜로 연결되려면 <a> 태그 앵커를 이용해서 href에서 전화번호나 이메일 앞에는 mailto: 뒤에 메일 주소를 써주면 된다.

※이메일 예시 ) <a href="mailto:이메일 주소"> 이메일 주소 </a>

CSS

CSS란

Cascading Style Sheets의 약로 HTML로 마크업 한 구조를 css를 활용하여 시각적으로 보기 좋게 만들어주는 역할을 하는 언어이다.

CSS의 기본 구조

CSS는 스타일이 필요한 요소를 선택하여 그 안에 속성과 : 값을 사용해 선언하여 작동하는 방식이다.

하나의 선택자에 여러 선언이 들어갈 수 있으며 선언 개수의 제한은 없다. 주의할 점은 선언 후에는 세미콜론 ; 을 찍어서 다음 선언과 구분 지어야 하며 선언은 {중괄호로 감싸 진다}

적용방법

CSS를 적용하는 방법에는 크게 3가지가 있다.

내부
외부
인라인

내부 CSS

내부는 작성된 HTML 문서에서 <head> 태그 안에 <style> 태그를 이용 해서 사용하다.

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    
    내부 CSS
    
    </style>
</head>
<body>
</body>
</html>

외부 CSS

외부는 작성된 HTML 문서에 외부에서 작성된 CSS 파일을 링크 <link> 또는 임포트@import 하는 방법이다.

두 가지 모두 <style> 태그 안에 작성되며 임포트 된 url은 (소괄호)로 감싸줘야 한다.

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
    링크를 이용한 외부 CSS
    <link rel="stylesheet" href="외부.css">
    
    임포트를 이용한 외부 CSS 
    @import url("외부.css");
   
    
</head>
<body>
</body>
</html>

인라인 CSS

인라인으로 작성하는 방법은 HTML 작성된 요소 안에 직접 사용한다. 가장 가깝게 작성된 CSS 이므로 우선순위는 제일 높지만 가독성 및 유지 보수에 좋지 않다.

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS import</title>
</head>
<body>

	원하는 요소 안에 스타일과 속성 : 값을 작성한다.
    <h1 style="font-size:32px">hello world</h1>
</body>


</html>

CSS reset (normalize.css)

css reset 이란 브라우저가 가지고 있는 기본적인 시트의 설정을 초기화 (모양 없음)으로 초기화시키는 것이다.

이유는 현재 수많은 브라우저가 존재하고 예전에 비해 호환성은 좋아졌지만 그럼에도 조금씩 차이가 나기 때문에 reset을 이용해서 어떤 브라우저에서도 같은 결과물을 보여주기 위함이다.

에릭 마이어의 reset CSS

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

선택자 (selector)

선택자란 말 그대로 요소를 선택하는 것이다. 스타일을 적용할 요소를 선택하여 선언 블록을 작성해서 적용한다.

종류

전체(범용) 선택자
태그(타입) 선택자
클래스 선택자
id선택자

전체(범용) 선택자

HTML 문서의 모든 요소(태그)에 CSS를 적용할 수 있다.

전체 선택자

*{ 
  font-size: 20px;	
   }
   
   html 문서 내의 모든 폰트 사이즈를 20px로 적용.

태그(타입) 선택자

HTML 문서의 태그(타입)를 직접 선택하여 CSS를 적용할 수 있다.

태그 선택자

p{
  font-size:20px
  }
 
 
 p 태그를 가진 요소의 폰트 사이즈를 20px로 적용.

. 클래스 선택자

태그나 요소에 class와 값을 가진 요소를 찾아서 선택한다.

클래스의 값만 선택하거나 클래스와 값을 함께 선택 또는 다중으로 선택하여 스타일을 적용할 수 있다.

클래스 선택자 - 선택자 앞에 . (콤마를 찍어 클래스 선택자임을 알린다.)

.one{
  font-size:20px
  }
 
 <p class="one"></p>
 
 one 인 클래스를 가진 요소의 폰트 사이즈를 20px로 적용.

#id선택자

클래스 선택자와 매우 유사하게 보이지만 id의 값은 페이지에 단 한 개만 존재할 수 있다.

클래스 속성은 어떠한 분류 안에 포함된 요소를 정의할 때

아이디 속성은 어떠한 요소에 유일한 특성을 정의할 때.

id 선택자 - 선택자 앞에 # (샵 을 찍어 id 선택자 임을 알린다.)

#one{
  font-size:20px
  }
 
 <p id="one"></p>
 
 one 인 id를 가진 요소의 폰트 사이즈를 20px로 적용.

이외에도

복합 선택자

하위 선택자
자식 선택자
인접 형제 선택자
일반 형제 선택자

속성 선택자

태그[속성 이름]
태그[속성 이름="변수"]
태그[속성 이름~="변수"]
태그[속성^="변수"]
태그[속성$="변수"]
태그[속성*="변수"]
태그[속성|="변수"]

가상 클래스 선택자(Pseudo class selector)

가상 요소 선택자 등이 있다.

html 수업을 마무리하고 CSS로 넘어와서 활용하고 적용하면서 마크업에서 할 수 없었던 변화들이 신기하고 완전히 새롭게변화하고 CSS를 이용하여 그림그리기, 3d , 애니메이션 등 엄청나게 많은걸 할수 있다는 점이 너무 기대된다. 하지만 그만큼 마크업에 비해 알아야 하는 지식들과 실용성 있고 가독성 좋게 구현해 나가기에는 지금의 나로서는 넘어야 할 아주 높은 산들이 끝없이 펼쳐진 느낌이 들었다.

수업을 하면서 많은 실습들을 하면서 이러한 것들을 친숙하게 만드는 게 제일 먼저 해야 할 일인 거 같다. 수업 후에는 하루의 수업내용들 또는 복습, 과제들을 커밋하고 블로그를 쓰기 위해서 수업내용들을 다시 보거나 구글링을 하면서 조금씩 더 이해도가 높아지는 거 같다.

css를 이용해서 실습한 내용들과 과제들은 아래 github에 전부 업로드했다.

https://github.com/chry8822

chry8822 - Overview

‘Keep true to the dreams of thy youth’ . chry8822 has 11 repositories available. Follow their code on GitHub.

github.com

728x90

'CSS' 카테고리의 다른 글

클론 코딩, 미디어쿼리. (0)	2021.11.14
HTML , CSS 로 버튼 만들기 2!! (0)	2021.11.13
HTML , CSS 로 버튼 만들기. (0)	2021.11.11
멋쟁이 사자처럼 <CSS>로 캐릭터 만들기 수상! (0)	2021.11.08
멋쟁이 사자처럼 <CSS> 로 네이버(Naver) 로그인 박스 만들기. (0)	2021.11.07