[생활코딩] CSS

c o d i n g . . 🍉/HTML & CSS

[생활코딩] CSS

H J 2021. 3. 17. 01:47

css는 html 파일에서 head 부분에 style이라는 태그를 추가해서 사용하거나 style 속성을 이용해서 사용할 수 있다

(css에서의 주석은 /* */)

* style 태그를 이용하는 방법

<head>
	<style>
    	a {
        	color: red;
        }
    </style>
</head>

* style 속성을 이용하는 방법

<a href="~" style="color: red">

선택자의 종류

* 같은 종류의 선택자라면 가장 아래의 코드를 따름

#id: 단 한 번만 사용할 수 있고 우선순위가 가장 높음
.class: 클래스로 지정한 것들에 대해 설정 가능
tag: 우선 순위 가장 낮음

일단 내가 css 개념 공부하면서 두드려 본 코드

(좀 따 다 바꿀거라서 일단 여기다 저장!)

<head>
        <meta charset="UTF-8">
        <title>WEB</title>
   
        <!--id 선택자(#) > class 선택자(.) > tag 선택자 -->
        <!--같은 선택자라면 마지막에 쓰인 코드를 따름-->
        <!--id는 무조건 중복되면 안됨-->
        <style>
            a {
                color: rgba(179, 113, 240, 0.876);
                text-decoration: none;
            }
            h1 {
                color:crimson;
                font-size: 45px;
                text-align: center;
            }
            div {
                text-align: center;
            }
            #active { 
                color:burlywood
            }
            .saw {
                color: gray;
            }
        </style>
    </head>

이 플레이리스트 들으면서 코딩해따! 이걸 보시는 열어분도 들어보세요!! ^ㅁ^

아 근데 진짜 이해가 안 되는 게

위의 코드는 색이 제대로 바뀌는데

이 코드는 h1 색이 안 바뀜,,, 왠지 진짜 모르겠다 아직 ;ㅅ;

왜 WHYㅠㅠㅠㅠ

앗 그리드 아직 이해가 안 돼,,, ;ㅅ;

*나란히 배치하고 싶을 때

display: grid;

grid-template-columns: 150px 1fr;
/*첫번째 콘텐츠는 항상 150px만을 차지하고 두번째 콘텐츠는 나머지 공간을 모두 차지한다*/

grid-template-columns: 1fr 2fr;
/*두번째 콘텐츠는 항상 첫번째 콘텐츠 2배의 공간을 차지한다*/

grid

div: block
span: inline

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

🐶media quary(반응형 디자인)

*화면이 800px보다 큰 경우 보이지 않게 하기

 @media(min-width:800px){
 	div{
    	display: none;
	}
}

아래의 접은 글은 내가 반응형 디자인을 응용해서 글씨 색을 바꿔본 것!

(궁금하면 더보기 누르기!!)

나는 줄글 말고 사진이랑 동영상을 첨부해뒀더니 별 차이가 없어서 화면의 크기에 따라 제목과 글씨의 색을 바꿔보았다!

(저 1, 2, 3은 어떻게 없애는지 모르것다,, 허허)

그리고 style 태그 안에 있던 내용들을 따로 css 파일로 저장해서 link 태그 사용하기!!

<link rel="stylesheet" href="style.css">

헤헤 깃에 업로드했는데 첨으로 css 파일 생겼다

'c o d i n g . . 🍉 > HTML & CSS' 카테고리의 다른 글

내가 정리한 HTML (0)	2021.03.15
[생활코딩] html (0)	2021.03.15
Visual code 설치 & 파일 만들기 (0)	2021.03.15
[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습 (0)	2021.02.01
[생활코딩] 웹 애플리케이션 만들기(4): CSS 이론 (0)	2021.01.31

현재글[생활코딩] CSS

🍃🛋🧤🍋🍧🍈🐈🎧

42 seoul, 내가 정리한, 코딩, JavaScript, 웹프로그래밍, 생활코딩, 파이썬, 프론트엔드, Nodejs, 생활코딩 nodejs, 백엔드, html 독학, 웹 프로그래밍, python, 생활코딩 웹, 자바스크립트, html, 웹프, css, 인프런,

Today :
Yesterday :

일	월	화	수	목	금	토
			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	29	30	31

🐹's tory