목록노마드코더/코코아톡 클론코딩 (47)
천진난만 코딩 스토리
1) header 만들기 span*3 을 적고 엔터키를 누르면 span 태그가 3개 작성되는 것을 볼 수 있음. 를 하여 screen-header 라는 class를 가진 header을 만듬. Friends 를 하여 screen-header__title 라는 class를 가진 Friends라는 title을 만듬. 를 하여 screen-header__icons 라는 class를 가진 박스를 만듬. 를 하여 원하는 아이콘을 찾아서 붙여넣기 함. Friends와 아이콘들이 적용된 것을 볼 수 있음. fa-lg를 하여 아이콘의 크기를 키워줌. 아이콘의 크기가 커짐. html 파일에서는 여기까지 하고 css파일에서 스타일을 주도록 하겠음.
1) html파일에 notification 만들기 Friends.html 파일에서 채팅 아이콘 부분에 span을 만들어줌. 스타일을 하기 위해 class도 작성해줌. 2) natification 스타일 하기 nav-bar.css 파일에 .nav__notification을 하여 불러와서 background-color: tomato; 을 하여 배경색을 변경하고 width: 30px; 와 height: 30px; 을 하여 너비와 높이를 주고 border-radius: 15px; 을 하여 둥글게 만들어줌. (원으로 만들기 위해서 너비와 높이를 동일하게 설정하고 border-radius를 너비와 높이의 절반으로 작성해줌.) 적용을 하였지만 너비와 높이가 적용되지 않음. 그 이유는? span은 block이 아니라 ..
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줄 이상이..