천진난만 코딩 스토리

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; } 를 하여 두 번째 자식인 박스를 가운데로 설정함. (두 ..

1) css 시작하기 스타일을 주기 위해 css폴더에 style.css 파일을 만듬. html 파일에 style.css 을 적용시키기 위해 단축키인 link:css를 적고 enter키를 누르면 자동으로 css 파일을 불러옴. 다만 css 폴더가 적혀있지 않아 추가로 작성함. 2) 상태바 위치 조정하기 상태바의 내용들을 한 줄에 두기 위해 박스를 flex하여 수평으로 박스 사이마다 같은 공간을 두고 위치하도록 함. 그러자 박스들이 같은 공간을 사이에 두고 위치함. 3) 세부 공간 만들기 No Services 와 와이파이 아이콘 사이가 떨어질 수 있도록 span 태그에 margin을 주어서 공간을 줌. 그러자 No Services 와 와이파이 아이콘 사이에 공간이 생김 4) 폰트 변경하기 원래의 폰트가 맘에..

1) 환영 문구 작성하기 페이지의 가장 윗 부분을 작성함. (상태바 제외) h1을 하여 가장 큰 글씨로 환영문구를 작성함. 다음으로 p태그로 간단한 설명을 덧붙임. header 태그는 많이 쓰이기 때문에 class를 작성해줌. 자식태그에도 class를 작성해주는데 이때, 원하는 곳 1을 선택한 후에 원하는 곳 2를 alt키 혹은 option키와 함께 누르면 동시에 작성할 수 있게 됨. 자식태그에 '부모class__원하는 내용'을 하여 class를 작성하여줌. 이렇게 하지 않으면 나중에 스타일 변경 시 번거로움. 2) log in 파트 만들기 를 하여 Email or phone number를 입력하는 박스를 만듬. 를 하여 Password를 입력하는 박스를 만듬. 를 하여 Log in 버튼을 만듬. 를 하..

6) 아이콘 넣기-1 아이콘을 넣기 위한 쉬운 첫번째 방법으로는 Heroicons가 있음. https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com 위의 사이트에서 원하는 아이콘 검색 후 html 파일에 복붙하면 됨. 굉장히 긴 코드가 작성되며 아이콘이 입력됨. 7) 아이콘 넣기-2 또 다른 방법으로는 Fontawesome가 있음. https://fontawesome.com/icons Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. Mo..

Block Element Modifier 1. BEM을 사용하는 이유 처음 HTML과 CSS를 작성하다 보면 class 혹은 id를 작성할 때 규칙에 대해 생각하지 않고 사용하여 오류가 나는 경우가 있음. 또는, 코딩이 길어질수록 CSS를 작성할 때 id를 작성하였는지 clss를 작성하였는지 헷갈릴 때가 있음. 그렇기에 많은 사람들이 적용시킨 규칙이 BEM임. 모든 부분을 class를 작성하기로 결정하여 규칙에 따라 작성할 경우 HTML 파일에서 id인지 class인지 확인하지 않아도 됨. 조금 더 쉽게 HTML과 CSS를 작성하기 위해서 그리고 동시에 여럿이 작업할 시 헷갈리지 않기 위해서 사용함. 2) BEM의 기본적인 규칙 가장 먼저 .btn이라는 버튼이 있고 그 버튼 안에 price 정보가 있는 ..

1. index.html 생성 index.html 파일을 생성함. 대부분의 웹 서버가 default로 index.html을 찾아보도록 설정되어있음. 영어에서 'index'는 '첫번째'라는 의미. 2. html 기본 설정 html 파일에 !를 작성 후 enter키를 누르면 기본 설정이 됨. 3) title 변경하기 title에 원하는 내용을 적어주면 작성한 내용대로 title이 변경됨. 4) 상태바 만들기 상태바를 만들기 위해 status-bar라는 class를 가진 부모 div박스와 status-bar__column이라는 class를 가진 자식 div박스 세개를 만듬. 자식 div 박스의 class이름을 정할 때 column이라는 이름은 흔함. 그렇기에 status-bar의 자식 태그인걸 쉽게 알 수 있..