엘리스 3일차 수요일 실시간 강의 css

18800 단어 엘리스엘리스

이고잉님 이론 강의

html, css, javascript 라이브코딩 할 수 있는 사이트
https://jsbin.com/?html,output
https://codepen.io/

h2+(ol>(li>a)*3)

이걸 치면 아래처럼 나온다.

<h2></h2>
<ol>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ol>
  • id는 하나만 지정하고 싶을때, 즉 중복되지 않게 쓴다
    class는 여러개 묶어서 그룹으로 지정하고 싶을때 쓴다.
        <ul>
            <li style="text-decoration: underline;">item</li>
            <li class="italic" id="target">item</li>
            <li >item</li>
            <!-- 하나만 지정하고싶을때는 id, 그룹해서 지정하고싶으면 class -->
        </ul>
  • text-decoration: underline 은 밑줄
    a 태그로 링크를 걸면 자동으로 밑줄이 생기는데, 이때는 text-decoration: none으로 밑줄을 없앨 수 있다.
<h1 class="italic" style="text-decoration: underline;">CSS 기본 문법</h1>
  • margin 겹침 현상 (병합)
        h1 {
            /* display: inline; */
            padding: 50px;
            margin: 50px;
            /* 마진 겹침 현상 : 수직의 마진값은 오버랩이 된다. */
            width: 300px;
            height: 300px;
        }
        /* inline은 자기크기만큼 쓴다, block은 화면 전체를 쓴다. */
  • grid를 사용해서 n*n형태 배열을 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 20px solid red;
            margin: 10px;
        }

        #container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            /* fr이아니고 px로 하면 고정값이됨. fr은 반응형웹처럼됨 */
        }
    </style>
</head>
<body>
    <div>TOP</div>
    <div id="container">
        <div>LEFT</div> 
        <div>CENTER</div> 
        <div>RIGHT</div>
    </div>
    <div>BOTTOM</div>
</body>
</html>

결과

  • media query를 사용하면 화면 크기에 따라 디자인을 다르게 설정할 수 있다. -> 반응형 웹
            @media all and (min-width: 480px) { 
                #container {
                display: grid;
                grid-template-columns: 150px 1fr;
                transition: back;
            }
            ol {
                border-right: 10px solid pink;
            }
            }

480이상

480미만

480~960

@media all and (min-width: 480px) and (max-width: 960px) {}

여기서 border-right는 shorthand 형식으로 작성되었다.

코치님 실습 강의

viewport 선언 코드, head안에 넣는다.

<meta name="viewport" content="width=device-width, initial-scale=1">

사각형 둥글게 만들기

border-radius: 50px;

border 창 화면의 절반 width:50vw;

block: top to bottm
inline: left to right

임의공간 생성
div: block
span: inline

  • p.abc vs. p .abc
    p.abc: 클래스가 abc인 p
    ```
<p class="abc"></p>
```
    p .abc: p태그 안에 있는 클래스 abc
    ```
<p>
	<a class="abc"></a>
</p>
```
    비슷하게 p#abc도 있다.

grid: 2차원
flex: 1차원
flex container안에 flex item이 있다.

flex-direction: row y축에 수직으로 정렬
flex-direction: column x 축에 수직으로 정렬

row

column

#flex-container {
 display: flex;
 justify-content: flex-start;
}

id가 flex-container인 div를 flex처리하려면 display: flex; 라고 쓴다.
justify-content: 현재 주축에 나란한 방향으로 정렬 flex-start(왼쪽끝에서부터), flext-end(오른쪽끝에서부터), center(가운데)
align-items: 현재 주축에 수직되는 방향으로 정렬 flex-start(왼쪽끝에서부터), flext-end(오른쪽끝에서부터), center(가운데), space-between(각 객체 사이에 스페이스바), space-around(between한거 + 양끝객체옆에도 스페이스바)
flex-direction: column; : 주축을 세로 바꿈

https://chlolisher.tistory.com/18

position: static, fixed, absolute, relative
static: 아무효과없음
fixed: 고정
absolute: 상위컨테이너에 의존
relative: 자기위치를 기준으로 움직임
https://m.blog.naver.com/xowns4817/222138686218
https://bio-info.tistory.com/66

AWS RDS 구축
[백준] - 1978번: 소수 찾기(Java)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage