천진난만 코딩 스토리

border-box에 대해 알아보자. 컴퓨터가 우리의 명령을 이해하는 방식을 알아보며 알아가도록 하겠음. 박스에 width 200px를 주어보자. 그리고 나서 padding을 60px만큼 주게되면 width가 200px이 아니라 140px가 되어버림. 하지만 우리는 컴퓨터에 width 200px를 입력했기에 컴퓨터는 140px가 되어버린 width를 용납할 수 없음. 그렇기에 컴퓨터가 padding을 준 부분을 제외한 width를 200px으로 맞추어버림. 하지만 그렇게 하면 총 박스의 크기가 200px가 아닌 260px가 되어버림. 박스의 크기가 padding 만큼 늘어나버린 것임. 이때 box-sizing: border-box; 를 하여 "박스에 padding을 주어도 신경쓰지마! 내 box 사이즈를..

1) 아이콘 하단에 고정하기 position: fixed; 을 하여 고정시킨 다음, bottom: 0; 을 하여 아래쪽에 고정되게 함. 아이콘이 아래에 고정된 것을 볼 수 있지만 아이콘이 몰려 있음. 2) 아이콘 간격 넓히기 width: 100%; 를 하여 아이콘의 간격을 넓혀줌. 아이콘의 간격이 넓어진 것을 볼 수 있음. 하지만 padding 때문에 아이콘 하나가 화면 밖으로 벗어남. 3) 아이콘 모두 화면에 위치시키기 box-sizing: border-box; 을 하여 아이콘이 화면에 모두 위치하게 만듬. (border-box에 대한 내용은 다음 포스팅에..!) (지금은 사용한 모습만 보여줌) 아이콘이 화면에 모두 위치하면서 스크롤을 내려도 고정되어있게 만듬. (확인하기 위해 body를 길게하여 스크..

1) nav-bar.css 파일 만들기 navigation bar를 스타일 하기 위해 nav-bar.css 파일을 만듬. 스타일이 html 파일에 적용될 수 있도록 styles.css 파일에 import를 해줌. 이 때 파일의 순서는 중요함. 만약 reset.css 파일이 status-bar나 혹은 그 밑으로 가게 된다면 파일이 제대로 작동하지 않음. 2) 아이콘 위치 스타일 하기 flex해주고 space-between을 해주어 아이콘들이 같은 간격으로 떨어져있게 함. 아이콘들이 떨어져있는 것을 볼 수 있음. nav에 배경색을 주고 padding을 줌. 배경색이 생기고 아이콘이 padding을 가지고 있는 모습을 볼 수 있음. 3) 아이콘 사이즈 변경하기 아이콘의 사이즈를 키우기 위해 모든 아이콘의 사이..

1) 기본 화면 불러오기 index.html 파일에서 기본적으로 필요한 코드를 불러오겠음. 기본 설정과 상태바 코드를 불러옴. 원래 있던 header와 from은 제외하고 불러옴. 상태바가 만들어진 상태가 됨. 2) avigation bar 생성하기 위의 코드를 작성할 것인데 쉽게 작성하는 법이 있음. html 파일에 nav>ul>li*4>a 를 작성하면 위의 사진처럼 뜨는 것을 볼 수 있음. 작성 후 엔터를 치면 위의 사진처럼 작성이 되는 모습을 볼 수 있음. 이제 내용을 채워주어야 하는데 이 때에도 쉽게 작성하는 팁이 있음. 작성하고 엔터를 누르고 나면 위에 사진처럼 되어 있을 것인데 이 때 아무 키도 누르지 말고 1번 자리에 #을 작성 후 Tab키를 누르면 2번 자리로 이동될 것임. 똑같이 내용을 ..

1) 파일 분할하기 css 폴더에 login.css 파일을 만들어서 코드를 옮겨줌. 좀 더 정리를 해보자면 css 폴더에 components 폴더와 screens 폴더를 만들고 components 폴더 안에 status-bar.css 파일을 넣어주고 screens 폴더 안에 login.css 파일을 넣어줌. 분할한 파일들을 styles.css 파일에 import 해주어야 함. 폴더이름/파일이름; 하여 적용시킴. 원한다면 주석을 달아서 구분을 해주어도 좋음. 현재 styles.css 파일에는 import 해준 파일들과 전체에 적용되는 코드인 font-family 코드만 있음. 2) date 보내기 log in 버튼을 클릭하면 다음 페이지로 이동하도록 만들어 보자. 먼저 다음 페이지를 생성해줌. 다음 페이지..

7) 버튼 제외하고 스타일 하기 :not([type="submit"]) 을 하여 type이 submit이 아닐 때를 말하게 함. type이 submit이 아닐 때 boder의 스타일을 변경하도록 함. 버튼에 들어가 있던 스타일이 사라짐. 8) 버튼 색 변경하기 input[type="submit"] 을 하여 type이 submit일 때를 말하게 함. type이 submit일 때 배경색을 노란색으로 가지게 함. 버튼의 색이 노란색으로 바뀜. 9) 커서 모양 변경하기 cursor: pointer; 을 하여 커서의 모양을 pointer로 변경함. 커서가 버튼 위에 올라가자 디자인이 바뀌는 것을 볼 수 있음. 10) 버튼 모서리에 스타일 하기 border-radius: 5px;를 하여 모서리를 약간 둥글게 함. ..

1) login-form 정렬하기 가로로 정렬되어 있는 박스를 세로로 정렬해보자. login-form은 id였기에 #login-form을 하여 불러옴. flex를 하고 주축을 수직으로 변경하고 위아래에는 0px를 양옆에는 30px의 margin을 줌. 박스들이 세로로 정렬된 것을 볼 수 있음. 2) input 박스 스타일 하기 border: none; 를 하여 기본 boder를 없애줌. padding: 15px 0px; 를 하여 위아래에는 15px를 양옆에는 0px의 padding을 줌. font-size: 18px; 를 하여 글씨 크기를 18px로 함. border-bottom: 1px solid rgba(0,0,0,0.2); 를 하여 boder의 밑 부분에만 1px의 solid 디자인으로 검정색이지만..

1) header 글자 정렬하기 header의 글자를 스타일 해보겠음. header 전체에 margin을 90px 주고 text-align: center;를 하여 글자를 중앙으로 오게 함. 그러자 header의 글자가 상단에서 90px 떨어지고 중앙에 위치한 것을 볼 수 있음. 2) header__title 스타일 하기 header__title에 margin-bottom:40px;을 하여 글자의 밑에 40px의 공간을 주고 글자 크기를 25px로 함. header__title 부분인 'Welcome to Kokoa Clone'의 글자 크기가 커지고 밑에 공간이 생김. 3) header__text 스타일 하기 화면의 크기에 따라 text의 줄 개수가 바뀜. 이 줄 개수가 화면이 아무리 작아져도 2줄 이상이..

1) css의 기본설정 지우기 body의 margin 같이 브라우저가 자동으로 html에 적용시키는 스타일이 있음. 스타일을 하다보면 이 기본설정을 지워야 하는 상황이 생김. 그렇게 하기 위해서는 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 rea..

5) 상태바의 박스 위치 수정하기 박스 간에 간격을 주기 위해 justify-content: space-between; 을 하였음. 앞에 와이파이 쪽에 공간을 주다보니 시계의 위치가 가운데에서 치우져지게 됨. 그렇기에 컨테이너 하나를 중심에 놓는 다른 방법을 사용하겠음. .status-bar { display: flex; justify-content: center; } 를 하여 모든 박스를 가운데로 모아주고 .status-bar__column{ width: 33%; } 를 하여 모든 박스의 너비를 33%로 설정하고 .status-bar__column:nth-child(2){ display: flex; justify-content: center; } 를 하여 두 번째 자식인 박스를 가운데로 설정함. (두 ..