천진난만 코딩 스토리

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의 자식 태그인걸 쉽게 알 수 있..

3) 핸드폰 화면으로 보는 법 브라우저에서 우클릭하여 '검사'를 누른 후 (혹은 F12를 누른 후) 검사창의 상단 부분에 있는 device toolbar (두 번째 이미지에 있는 빨간 [ ]부분)를 누르면 브라우저를 핸드폰에서 사용하는 것처럼 테스트를 할 수 있음. 4) 핸드폰의 가로모드 혹은 세로모드 일 때 박스의 변화 and (orientation:landscape) 을 하여 핸드폰이 가로모드일 때 변하도록 추가 설정해줌. 핸드폰이 세로모드일 때에는 박스의 스타일이 변하지 않다가 핸드폰이 가로모드가 되면 박스의 스타일이 변함. 5) 가로모드일 때 문구 삭제하기 박스 밑에 "가로모드 해주세요 :)"라는 문구를 추가함. 핸드폰이 가로모드가 되면 "가로모드 해주세요:)"라는 span이 삭제되도록 함. 세로..

css만을 이용해서 스크린의 사이즈를 알 수 있는 방법. 현재 화면이 핸드폰이라면 가로 상태인지 세로상태인지, 컴퓨터 화면이라면 창을 크게 하였는지 작게 하였는지 감지하는 것. 스크린의 사이즈에 따라 css를 변경하게 하는 것. 1) 특정 사이즈에 따른 박스의 변화 브라우저의 가운데에 위치하도록 div 박스를 하나 만듬. @media screen and (max-width:600px)를 하여 창의 크기가 600px보다 작으면 변하도록 작성함. 창의 크기가 600px보다 크면 박스의 색이 파란색이고, 창의 크기가 600px보다 작으면 박스의 색이 초록색이 됨. 특정 구간에서만 변화하게 할 수도 있음. @media screen and (mix-width:600px) 를 하면 창 크기가 600px보다 크면 변..

4) from to의 부자연스러움 to에서 자리를 이동시키면 다시 from으로 돌아갈 때 자연스럽게 돌아가는 것이 아닌 갑자기 이동하면서 부자연스럽게 됨. 5) %로 구간 나누기 %로 구간을나눔. 0% -> 50% -> 100로 구간을 나누어, 구간마다 변화를 설정하여 중간에 이미지의 위치가 이동하더라도 자연스럽게 원래 위치로 돌아올 수 있게 하여 자연스럽게 재생되도록 함. 0~100%까지 원하는대로 구간을 설정하여 사용 가능함. 예를 들어, 0% 100% 0% 50% 100% 0% 25% 50% 75%100% . . . 다양하게 구간을 설정하여 사용 가능함. Animate.css 를 참고하면 다양한 애니메이션을 볼 수 있음.

다른 state와 transition 없이 애니메이션 재생하기 위해 사용. 원하는 만큼 만들고 재생할 수 있음. @keyframes 사용하여 만듬. 1) transition과 animation의 차이 transition animation state에서 다른 state로 변하는 것을 애니메이션으로 만듬 다른 state와 transition 필요함 원하는 요소가 선택되어야 재생됨 다른 state가 없어도 재생이 되는 애니메이션을 만듬 다른 state와 transition 필요하지 않음 별도의 선택 없이도 지정된대로 재생됨 2) animation 만들기 (from to) 0도에서 360도로 회전하는 dream이라는 애니메이션을 만들고 이 애니메이션을 3초 동안 초반엔 느리고 중반엔 빠르며 후반엔 느리게 변하도..

transformation을 사용하여 애니메이션 효과를 줄 수 있음. 5) 이미지에 hover 스타일 적용하기 img:hover{ transform: rotate z(180deg); 를 하여 이미지 위에 마우스 커서가 올라가면 z축으로 180도 회전하도록 함. 다만 이미지가 갑작스럽게 변하다보니 자연스럽지 않음. 6) transition 사용하기 transition: transform 2s ease-in-out; 를 하여 이미지가 2초 동안 초반엔 느리다가 중반엔 빨라지고 후반엔 느려지게 회전하도록 함. 이때 transition은 변화하는 hover가 아니라, 변화하지 않는 root에 작성하여야 함. 변화하는 시간을 줄여서 빠르게 움직이도록 할 수 있음. transform: rotate(360deg) ..