국비/Client(HTML&CSS&JavaScrpit)

2023.01.31 4일차 CSS

춘핑이 2023. 1. 31. 16:56

CSS

영어 배울때 모든 셀렉터를 배우지 않듯이 일부만 배웟다.
하나의 element를 자세하게 뜯어보자.
border margin padding height width box outline

24. boxmodel

밑에 styles탭 특정 element에 어떤 style이 있는지 보여줌. 브라우저 기본스타일임.
margin / border / padding / content영역으로 나누어져있음.

25. border

기본 크롬의 상태 html의 기본스타일링에서는 border가 없다.
border는 두께 모양 색을 지정할 수 있다.

#head1{
    border: 5px solid blue;
}

26. border - style-1

solid-직선 dashed-대쉬로 감싼모양 dotted-... double-이중선 등등이 있다.
https://www.w3schools.com/css/css_border.asp
가면 어떤 모양들이 있는지 알 수 있다. 적절한 보더를 만들고 싶을때 사용해보자.

#head5{
    border-top-style: solid;
}

이런식으로 한쪽에만 스타일을 줄수도잇다.

#head9{
    border-top-style: dashed;
    border-right-style: double;
    border-bottom-style: dotted;
    border-left-style: solid;
}

위의 것을 응용하여 하나의 element에 4개의 영역이 있는데 각각 다르게 줄 수 잇다.

box모델로 보면 4개의 영역이 있으니 원하는 모양으로 만들 수가 있다.

27.border - style-2

#head2{
    border-style: dashed double dotted solid;
}

이렇게 작성해도 위/ 우 /아래/ 좌 순서대로 적용된다.

#head3{
    border-style: solid double dotted;
}

3개만 주면 위/ 좌우/ 아래가 된다.

#head4{
    border-style: solid dotted;
}

2개만 주면 상하 / 좌우가 된다.

28. border-width

그냥 두께만 주면 나타나지 않는다. 보더 스타일을 먼저 적용해야한다.

#head1{
    border-style: solid;
    border-width: 5px;
}

#head3{
    border-style: solid;
    border-top-width: 20px;
}

하면 한쪽만 두께를 변경할 수도 있다. 

#head7{
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 70px;
    border-left-width: 20x;
}

스타일과 마찬가지로 한번에 각각 다른 방향에 줄 수있음
.
#head8{
border-width: 5px 10px 7px 20px;
}
스타일과 같게 상 우 하 좌의 순서대로 적용된다.

하나의 element가 네모난 상자로 이루어져 있어서 상하좌우에 형태가 있음을 알면된다.\

29. border-color

#head1{
    border-color: blue;
}

#head2{
    border-color: rgb(218,51,22);
}

역시나 rgb값 등으로 색을 줄 수있다.

#head7{
    border-top-color: red;
    border-right-color: violet;
    border-bottom-color: blue;
    border-left-color: beige;
}

30.border

#head1{
    border-style: double;
    border-width: 10px;
    border-color: red;
}

#head2{
    border: 10px double red;
}

위와 아래가 같다. 여러개의 property를 한번에 사용하는 것이 shorthand property라고 한다.
Shorthand property for setting border width, style, and color. 마우스를 올리면 설명이 나온다.
https://developer.mozilla.org/en-US/docs/Web/CSS/border mdn사이트로 안내도 해준다.
이전들과 유사하게 각 테두리마다 스타일 너비 색을 적용할 수 있다.
확인문제
head5에 아래 테두리 스타일 너비 색 적용

#head5{
    border-bottom: 5px dotted green;
}

head6에 왼쪽 테두리의 스타일 너비 색 적용

#head6{
    border-left: 10px dashed aqua;
}

border-radius

#head7{
    border: 3px solid red;;
    border-radius: 10px
}

border를 네모난 박스가 아닌 곡선의 형태로 줄 수도 있다. border 값을 먼저주고 radius가 크면 클수록 동그라미가됨.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
왜곡시킬수도 있다.
border-image
선대신 지정한 이미지를 넣을 수도 있다.

31. Margin

border바깥의 영역이다.
element주의의 공간을 의미한다. 보더와 마찬가지로 방향으로 각각 줄 수 있다.
margin-top 등
h1태그의 경우 margin을 주지 않아도 브라우저 기본 스타일로 margin이 있다.
div는 기본스타일이 없어서 margin없이 그냥 다 붙는다.
개발자 도구를 활용해서 가상으로 어떻게 적용되는지 알 수 있다.

#head5{ 
    margin-top: 7px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 15px;
}

마찬가지로 한쪽씩 줄 수 있다.

#head6{
    margin: 7px 20px 10px 15px;
}

보더와 마찬가지로 상 우 하 좌의 순서를 가진다.

32. Margin Collapse

#box1{
    margin-top: 20px;
    margin-bottom: 50px;
}
#box2{
    margin-top: 30px;
}

box1-box2차이가 80px이겟거니 생각하지만 그렇게 적용되지 않는다.
이런일이 왜 발생하냐? HTML을 설계할때 위아래 마진이 하나의 마진으로 포함되게 만들어 놨기때문임
큰쪽을 기준으로 만든다.

33. Margin auto

div{ 
    border: 5px solid;
    height: 100px;
}
#box1{
    margin: auto;
    width: 100px;
}

box가 왼쪽에 치우쳐져잇을때 element를 가운데로 보내고 싶다. margin을 auto로 설정해주면 화면의 크기와 상관없이 알맞게 위치하게 해준다.

34. padding

border와 content 사이의 영역이다.
다른 영역들과 마찬가지로 각 방향을 따로 줄 수 있다.
#box2 오른쪽 패딩 10px

#box2{
    padding-right: 10px;
}

#box3 아래쪽 패딩 20px

#box3{
    padding-bottom: 20px;
}

#box4 왼쪽 패딩 15px

#box4{
    padding-left: 15px;
}

#box5 위쪽패딩 20px
#box5 오른쪽 패딩 10px
#box5 왼쪽패딩 15px

#box5{
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 15px;
}

텍스트를 가운데 있게 하고 싶다면? 패딩을 활용해서 위아래로 공간을 주어서 줄수도 있다.
height:200px;이고 font-size: 16px;이면
padding-top: 89.25px;
padding-bottom: 89.25px;
가운데 있는 효과를 줄 수있다.
무조건 이 방식을 하라는 것이 아니라 다릉 방법들로도 할 수 있다. 일단 패딩활용하는 방법을 배운 것이다.

35. content width-height -1

너비와 높이로 조절한다. 너비 * 높이로 표시된다.


px은 모니터 해상도에 의존한다.
element크기를 화면 크기에 비례해서 두고 싶다.
viewport를 사용한다. viewport란 브라우저안에서 화면을 보고 있는 부분만큼, 웹 애플리케이션을 보고 있는 창이다.

#box3{
    /* viewport width */
    width: 50vw;
    /* viewport height */
    height:50vh;
}

부모요소를 기준으로 넣을 수도 있다.

#box4{
    width: 50%;
    height: 50%;
}

적절한 단위가 필요하다? css unit을 검색해서 알아보자.
이 box4높이가 50%이면 부모의 기준이니 body기준으로 50%여야지 않겠느냐?
그런데 아님. why? position: absolute; 필요

36. width-height - 2

width, height가 border영역까지 설정
box-sizing: border-box;
#box3{
background-color: blue;
padding:20px;
border: 10px solid gold;
height: 100px;
width: 50vw;
}
이녀석은 너비가 화면의 절반보다 좀 더 커보임.
#box4{
background-color: blue;
padding:20px;
border: 10px solid chocolate;
height: 100px;
width: 50vw;
box-sizing: border-box;
}
박스사이즈를 보더 크기 만큼으로 만들어 주는 것임.
https://www.codingfactory.net/10630 box-sizing이 누구를 기준으로 할지를 정하는 것이다.
위의 예제는 보더의 너비를 기준으로 50vw한것임.

37.display

하나의 element가 4개의 영역으로 이루어져있다. border까지가 박스 그 밖으로 margin이 있다.
여러 element들이 어떻게 배치가 되는가?
어떤 것들은 옆으로 어떤 것들은 아래로 배치가 된다.
배치방법은 크게 2가지가있다.

37.1 block

1.가장 넓은 너비를 갖는다. (화면만큼)
2.새로운 줄에 배치된다.
중력이 위에있는 느낌으로 블록을 쌓는 느낌임.

37.2 inline

1.필요한 만큼의 너비만 갖는다.
2.같은 줄에 배치된다.
대표적인 inline element
inline계의 div element = span 새로운 줄이아니라 옆에 크기에 딱맞게 배치된다.


a태그 (링크) img도 대표적인 inline element이다.

38. display - 2

block을 inline으로 inline을 block으로 변경하고싶다.

h1{
    background-color: yellow;
    display: inline
}

display property를 설정해주면된다.

a{
    background-color: cadetblue;
    display: block;
}

반대의 경우도 가능하다.

39. display - 3

div{
    background-color: yellow;
    border: 5px solid blue;
    width: 100px;
    height: 50px;
    padding: 10px;
    margin: 20px;
}

div를 5개 배치해보면 block이라 새로운 줄에 생성이 되고 너비 높이 패딩 마진 등이 원하는대로 된다.
display: inline으로 바꾸면 패딩마진 등이 우리가 원하는대로 되지가 않는다.
->다음

40. display - 4

display : inline은 width, height, padding, margin을 예상하기 힘들다.
width, height, padding, margin을 개발자가 원하는 대로 그리고 같은 줄에 배치하고 싶을 때
display: inline-block을 해주면된다.

41. inline-block

block으로 둿을때는 margin을 두지않앗는데 알아서 inline-block하니 알아서 margin이 생겻다.
<div class="box">box1</div>
<div class="box">box2</div>
로 배치해서 엔터가 들어가서 자동으로 스페이스가 추가된것이다.
이걸 해결하려면 <div class="box">box1</div><div class="box">box2</div> 쓰면? 코드 보수할때 힘들어진다.

이래서 생긴것이 flexbox이다 요소를 가로축기준으로 배치할때 용이하게 사용
element가로로 두는데 원하는대로 padding margin 등을 마음대로 두고 싶다.

42. flexbox

블록이 세로 기준으로 배치된다. 이걸 가로로 배치하고 싶다면?
이 요소들을 flexbox에 담으면된다.
flexbox의 자식요소는 가로축 기준으로 배치됨(손자x)

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
.box{
    display:flex;
}


중력을 왼쪽으로 하고 박는 느낌 width, height, padding, margin이 원하는대로 들어가게 된다.

43. flexbox ex1

w3schools의 메뉴부분을 비슷하게 만들어보자.

.container{
    display : flex;
}
.container > img{
    width: 77px;
    height: 77px;

}
.container > div{
    font-size: 18px;
    font-weight: bold;
    padding : 25px 12px;
}
<div class="container">
    <img src="img/1.png">
    <div>Tutorials</div>
    <div>References</div>
    <div>Exerciese</div>
    <div>Sign Up</div>
</div>

44. icon

웹사이트 만들때 아이콘들 돋보기(검색)같은거 어떻게 쓰나?
fontawesome.com 유료(몇개는 무료)
외부 css파일이 필요하다.
https://fontawesome.com/start 에서 이메일을 얻고 팡리을 얻거나
https://cdnjs.com/ 아니면 여기서 얻는데 우리가 필요한 js css 파일등을 제공하는 곳이다.
검색을하고 html코드처럼 생긴 것을 누르면 링크가 복사가된다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
css가 외부 사이트 경로에 있는 것이다.

<div class="container">
    <a href="#"><img src="img/1.png"></a>
    <div>Tutorials<i class="fa-solid fa-caret-down"></i></div>
    <div>References<i class="fa-solid fa-caret-down"></i></div>
    <div>Exercises<i class="fa-solid fa-caret-down"></i></div>
    <div>Sign Up<i class="fa-solid fa-caret-down"></i></div>
</div>


아이콘을 가져와서 사용할 수 있게 되었다.
free가 아닌것은 나오지 않는다. pro~써있는것 사용불가.
이녀석들은 inline element이다.
크기조절 -> font-size 색조절 color

https://fontawesome.com/docs 도큐먼트 보면 활용법이 나옴.
자주 사용할 것 같으니 json에 등록해두자.

움직이지 않아서 찾아보니 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences
Why are my animated icons not animating?
Make sure your system's settings are not preventing the animations. You can check it or change it in user preferences (opens new window).
설정을 해줘야한다고 한다.
설정 > 접근성 > 디스플레이 > Windows에서 애니메이션 표시.

2023.01.31 후기

매번 html코드 작성하는 것이 복잡하다.
file - preference - configure user snippets - html검색

"my html code" : {
    "prefix": "aa",
    "body": [
        "<!DOCTYPE html>",
        "<html>",
        "<head>",
        "\t<style>",
        "\t</style>",
        "</head>",
        "<body>",
        "\t$0",
        "</body>",
        "</html>"
    ]
}

미리 작성한 코드를 한번에 불러올 수 있도록 json으로 저장하는 듯하다.


aa를 작성하면 body가 키값인 배열 []안의 내용이 불려오는 것이다.

어제 배운 nth-child와 nth-of-type가 갑자기 생각나서 차이점을 찾아보았다.
https://hogni.tistory.com/112
nth-child의 경우 부모 요소의 모든 자식 중 순서만 맞다면 해당 요소를 선택
nth-of-type의 경우 부모 요소의 모든 자식 요소 중 ①type 조건을 만족하고 ②순서를 만족하는 대상을 의미한다.

오늘은 현타 오지게 오는날 공부가 되지 않는 날이다. 다른사람들이 어떻게 공부하고 있는지가 궁금하다.
또 이런 것들을 어떻게 현타를 극복하는지가 궁금하다. 겨우 4일차만에 현타가 오는게 말이 안되긴하다.
혼자 자습까지포함해도 겨우 6일차인 것인데 새로운 걸 배우는 것이 설레야하고 기간이 많이 남았는데
그런게 생기지 않는다. 다시한번 우매함의 봉우리에 도착한 것 같다. 하지만 더 발전하기 위해서 공부는 계속 할 필요가 있다.
천천히 매일 해야할일을 조금씩 해나가다보면 어려움을 극복할 수 있을 것이라고 믿는다.
독학할때는 원래 이런날 하루 쯤 쉬었는데 그러지 못하니 더 그런 것 같기도하다. 중요한 것은 꺾이지 않는 마음이다.