css

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

ㅇTL

css 본문

html, javascript

css

정노르레기 2021. 5. 18. 23:51

* 기본 html 코드

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

(디자인을 원함 !)

웹이 태어난 직후에 HTML에는 디자인을 위한 코드가 대거 추가됩니다. 무분별하게 추가된 디자인 기능은 정보로서의 웹이라는 가치를 오히려 퇴보시킵니다. 이를 극복하기 위해서 웹을 만드는 사람들은 디지털 정보의 세계를 완전히 바꿔놓을 기술을 궁리하기 시작하는데...

일단 웹페이지내용이중요하니까 일단 코드에 정보들만 담고, style태그에 디자인에 대한걸 다 넣는다

그러기위해 css가 등장했도다

*cascading : 순차적으로 정의해논스타일로 내려감 ..

1. author style : 개발자가 정의하는거 (=css file)

2. user style : 사용자가 지정 ex 다크모드 ..

3. browser : 브라우저상에서 기본적으로 지정된 스타일

이 순서로 넘어가면서 적용됨

1 이 가장 우선순위 -> 2 -> 3

selector

: html 의 어떤 태그들을 고를건지를 규정하는 문법

* : universal. 모든 태그를 고름

Tag : div 같은 해당 타입을 고름

#id이름 : 해당 id 고름

태그안에 id="d"

*아이디의 값은 단 한번만 등장해아함! 해당 아이디 태그는 딱 한번만 등장해야함! 중복 노노염

.class이름 : 해당 class 고름

class="saw active" , class="s" 이런식으로 태그안에 클래스 속성을 넣음

: :state(상태)

[] : attribute

* https://flukeout.github.io/ 게임 해보기

css 사용 방법

style 태그 안에잇는애들은 css 언어로 해석됨*html과 css는 완전히 다른언어이기 때문에 웹브라우저에게 하여금 어디서부터 어디까지가 css 인지를 알려줘야함-> 그래서 css 는 style 안에 다 담는것

<style>

selector{

property: value;

}

</style>

* 구체적으로 태그 가까이 지정한 애들이 우선순위 가짐

*아이디선택자(#a{~})>클래스선택자(.a{~})>태그선택자(a{~})

(우선순위. 이긴다. 강한걸로 시행된다)

-더 포괄적인게 태그 그다음이 클래스, 그 다음이 아이디니까. 아이디가 젤 구체적이니깐

(태그로 전체적인걸 하고 아이디로 예외적인걸 딱딱딱 두는것이 훨씬 효율적이니까 ~.~)

ex)

* {

color: green;

} => 모든 애들 색이 green 됨

#special{

color: pink;

} => id 가 special 인 애들 변함

li #special{

color: pink;

} =>li 중에서 id 가 special 인 애들 변함

.red{

width: 100px;

height: 100px;

background: yellow;

}

*div 는 크기 지정안하거나 내용물 없으면 걍 아무것도없슴 백그라운드해도 아무것도없긔

button:hover{

color: red

} => button이 hover 상태일때 (마우스 올린상태) 빨간색이 된다

a[href] {

color: purple;

} => a 중에 href 속성이 있는 애들만 색 보라색으로 한다

->css 사용 방법

1. style 태그 안에 넣기

2. style 속성을 쓰기

그 문자를 감싸고있는 태그 안에 style="color:red" 이런식으로 넣음 (html의 속성으로)

(style 이라는 속성을 사용하기로 약속함!!)

<li><a href="3.html style="color:red">안녕하시요</a></li>

*스타일 효과 여러개-> ;으로 구분한다 (속성일경우에도 여러개면 하나끝나는데에 ; 붙여야함)

ex)

text-decoration: none/underline 하면 밑줄 없어짐, 그어짐!

<style>
a{

      text-decoration: none;
    }
  </style>

이런식으로 ! (스타일속성으로한다 -> 한번에 " " 안에 담는다, 여러개면 ; 로 구분한다!)

property들 실험

*검색방법: css text size property

이런식으로 검색!!

h1{
font-size: 60px / large 등..
}

*text-decoration 얘는 a 태그 에서만 적용가능한 듯 해욤!!

/* ~~ */ 이게 css의 주석

공간

패딩: 내용물~경계선

경계선

마진: 경계선 뒤 공간

div{

width: 100px;

height: 100px;

padding:

- 시계방향으로 위 오른쪽 아래 왼쪽;(20px 20px 30px 40px 이렇게 지정가능)

- 20px 0px -> 위 아래만!

border: 2px dashed/solid red; 이렇게 한줄로 간단히 작성할 수도 있다

}

이런 속성들 mdn에서 검색

{

height: 100vh (=보이는 지금화면의 백퍼센트를 사용한다)

height: 100%(=부모의 백퍼센트를 사용한다)

}

display, position !

1. display - block, inline ..

block : 한줄에 상자 하나 ex) div

inline : 물건 (자체) ! 자기 내용물만큼 (내용물없으면 암것도 x). 안에 들어있는 내용물 크기만큼만 차지.

css에서 width/height지정하든말든.. ex) span

inline-block : 한줄에 다 여러개 넣는데 상자로, block으로연결되어서 자기 자신크기가 아닌 우리가 지정한 width 이런거

div,

span {

width: 80px;

height: 80px;

margin: 20px;

background: pink;

}

/*span은 내용물이 없으면 아무것도 표시되지 않는다. inline이기 때문. 내용물이 있어야 표시된다

반면 div는 블록이라서 한줄전체를 어차피 차지하기 때문에 괜찮다. 표시된다*/

- display: block / inline / inline-block;

하면 블럭/인라인으로 바꿀 수 있다 !

2. positoin

static : 기본값. 걍 맨왼쪽 끝 ! 이게 기본값이라서 위치이동시키려면 position: relative 해줘야함 !

relative : left, right 위치 바꿀 수 있게 됨 ! 원래 있어야 하는 자리에서 어느쪽으로 몇 픽셀만큼 이동할 수 있게 됨

absolute : 내 아이템이 담겨있는 가장 가까운 상자안에서 움직인다

fixed: 상자안에서 완전히 벗어나서 걍 웹 페이지 상에서 움직이는거.

sticky: 원래 있어야 하는 자리에 있으면서(static) 스크롤해도 없어지지 않는 거

ex)

.container {

left: 20px;

top: 20px;

positoin: relative;

} => 왼쪽부분과 위 부분이 20px만큼 떨어지게 됨

Flexbox

*float

=이미지와 텍스트를 배치하기 위해 사용함.

flexbox의 중요한 두가지 concept

1. container(박스) 과 각 아이템에 지정할 수 있는 속성값이 존재한다

컨테이너

-> display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

아이템

-> order, flex-grow, flex-shrink, flex, align-self

2. 중심축과 반대축이 있다 (수직축과 수평축이 있을 때, 수직축이 중심축이면 다른게 반대축)

(main axis, cross axis)

컨테이너 속성값들

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi

css-tricks.com

(이런 사이트에서 속성값들 찾아가면서 하면 된다)

-우선 플렉스박스임을지정해야함

-> display: flex;

-flex-direction: row(오~왼, 기본값)/ row-reverse(왼~오) (메인축은 수평축 ㅡ)

column(위~아래)/column-reverse(아래~위) (메인축은 수직축 ㅣ)

-flex-wrap: nowrap(기본값, 자리부족해지면 찌부되면서 모두 다 한줄에 그대로잇음) / wrap

-> 한번에

-flex-flow: column nowrap; 이런식으로 두개 한번에 쓰기 가능 !

-아이템을 어떻게 배치할 건지

1. 중심축에서 어느쪽에배치?

justify-content: flex-start (왼~오/위~아래)/flex-end(오른쪽/아래로 감, 근데 순서는걍그대로 1~10 임)

/center(가운데로)/space-around(다조금씩 띔. 그래서 중간에겹치는부분은 space가 2개)/

/space-evenly(space가 다 동일하도록 띔)/space-between(중간에만 space넣음. 맨끝쪽에는 노노)/

2. 반대축에서 어느쪽에 배치?

align-items: center(중심축이 수평이면 이거하면 수직으로 중간에 위치하게됨)

baseline(안에들어있는 내용물이 다 동일한 위치, 베이스 선에 맞추게 됨)

justify와 비슷한디 얘는 반대축기준으로함

align-content: space-between(중간에만 space넣음. 맨끝쪽에는 노노)

걍 justify-content에 잇는 애들 다 쓰게 되는데 반대축 기준으로 하게 됩니다

아이템 속성값들

-order: 3; 이런식으로 들어갈 순서 지정할 수 있다 -> 거의 안쓰임

-flex-grow (컨테이너 커졌을때 어칼지) : 0(기본값. 상자 빈공간 채우려고 안함. 고유사이즈 유지), 1 (1:1:1 이런식으로 빈공간 꽉 채우게 됨);

-flex-shrink(컨테이너 작아질 때 어칼지): 0(기본값), 2 (ex 2,1,1 하게되면 2:1:1 차지하도록 줄어듬)

-flex- basis(아이템이 공간 얼마나 차지할지 세부적으로 명시 도와줌): 60% (60%, 20%, 10% 하면 컨테이너가 줄어들든 커지든 항상 그정도 비율 차지하게 됨)

-align-self(아이템 하나만 배치 가능): center;

div.container>div.item.item.item${$}*10 탭

-> container라는 클래스속성가진 디브 안에 item item1~10(고유번호. $)이 클래스이고 내용물이 고유번호 1~10인 디브가 10개 만들어진다!!!

-----

*a 태그는 줄바꿈 안됨, h1 태그는 줄바꿈 됨

h1{
        border-width:5px; (선 굵기)
        border-color:red;
        border-style:solid; (그냥 단선)
      }

-> 화면 전체를 씀

a{
        border-width:5px; (선 굵기)
        border-color:red;
        border-style:solid; (그냥 단선)

(=border: 5px solid red; 이렇게만써도됨. 보더드 중복되면 귀차느니까.. ㄷ ㄷ)

}

-> 딱 문자 부분만 씀

즉

자기자신만큼 쓰는 태그가 있고 전체 쓰는 태그가 잇다

블럭 래밸 엘리먼트-> 전체쓰는애들

인라인 엘리먼트 -> 자기자신부피만큼 자기 컨텐트만큼 쓰는 애들

* display:inline/block 해서 바꿔질 수 있씀

박스모델

h1{
        border:5px solid red;
        padding:20px;
        margin:20px;
        width:100px
      }

-> 컨텐트-패딩-border-margin !!

  h1{
      font-size: 45px;
      text-align: center;
      border-bottom: 1px gray solid;
      padding: 20px;
      margin:0;
    }
    ol{
      border-right: 1px solid gray;
      width:100px;
      margin:0;
      padding: 20px;
    }

이런식으로!

-디자인을 위한 태그

1. <div> </div> : 블럭 ! ->당근 줄바꿈됨

2. <span> </span> : 인라인! -> 당근 줄바꿈 안됨

예> 불릿 없애기
<style>
ul{
list-style:none;
}
</style>

여기서 이 기술 써도되는지마는지 ~ can i use 페이지
https://caniuse.com/?search=grid

그리드

넣을애들을 우선 큰 div / span 에 넣는다그리고 각각 요소를 따로 div 에 넣는다 (id 는 다 설정)그리구 젤 큰 div 의 아이디가 grid 라고 한다면,

#grid{
display: grid;
grid-template-columns: 150px 1fr; (1fr 2fr -> 1:2 비율로 나눈다는 뜻~)

}이런식으로 쓴다-> 칸 나뉘어진드아~

*일반적으로 css에서 태그를 쓸 때일반적인 ol / ul / a 이런 태그를 바로쓰는건 좋지않다 (그따구로 하지 마라)어떤 div 안에 있다면 (id 가 a 라면)#a ul{~}이런식으로 하는게 바람직하다

반응형 디자인

=화면의 크기에 따라서 웹페이지의 요소들이 반응해서 동작한다 (달라진다)/* screen width > 800px */
      @media(min-width:800px){
        div{
          display: none;
        }
      }style 안에서 이런식으로 하면 됨

x 픽셀보다 작을 때 -> max-width:x px 클 때 -> min-width

*다 원래애들 다 유지가 되는거이므로바꾸고 싶은 애만 가져와서 바꿀 속성만 바꿔주면 됨ex#grid{
        display: block
      }
      ol{
        border-right: none;
      }이런식으로 !(테두리 없애고 싶다고 해서 ol 복사해와서 테두리만 지우는건 말이안댐아예 바꿔줘야댐

css 파일 ( 중복의 제거 위함)

style 태그 안에 적을 css 내용을 아예 다른 css 파일 안에 넣고

html 파일에는

이걸 넣는다

(style 태그 안함~)

'html, javascript' 카테고리의 다른 글

object (0)	2021.06.14
자바스크립트 데이터 타입 (0)	2021.06.02
javascript (0)	2021.05.21
서버운영 (0)	2021.05.18
html (0)	2021.05.18

'html, javascript' Related Articles

ㅇTL