티코의 코딩로그

유튜브 영상을 재생했을 때의 화면을 비슷하게 만들어 보려고 한다. 일단 영상을 보고 따라하기 전에 배웠던 것을 토대로 먼저 만들어 보았다. mobile first -> 이전 웹페이지에서는 전체 화면을 구성한 후 화면이 줄어들었을 때 경우를 추가해줬는데 이번에는 그 반대로 작은 화면부터 시작한다. 대충 화면을 구상해보았으나... 첫번째 문제 발생. 화살표 아이콘을 누르면 전체 제목이 다 나와야하는데 그 전에 제목을 어떻게 일부만 보일 수 있는지 찾지 못했다. 좋아요 싫어요 아이콘과 채널명 사이에 border를 주고싶은데 border가 나오지 않는다. nav 태그를 써서 그런건가 했는데 div로 바꿔보아도 border-top이 적용되지 않았다.

저번 영상에서 만들어 본 반응형 웹페이지에 이미지를 추가로 넣어보았다. 블로그 스타일의 페이지..! 저번 페이지와 헤더 형식은 거의 일치한다. 아이콘과 폰트, 컬러만 바꿔주었다. 지난번과 달라진 점은..! 사진을 누르면 내 다른 블로그로 연결된다는 것이다. 태그 없이

처음으로 반응형 웹을 만들어봤다. 화면 크기가 변할 때 웹화면도 변해서 짜릿하다.. 드림코딩 엘리님 영상을 보면서 완성했다. 내일은 여기에 추가해서 다른 화면도 만들어 봐야겠다. 완성된 모습! 반응형 헤더만 만들어보았다. 전체 화면일 때는 이런 모습이지만 일정 크기로 줄어들면 요로케 '三' 아이콘이 나타나면서 메뉴와 아이콘 부분이 사라진다. '三' 모양 아이콘을 클릭해주면~~ 요로케 숨겨져있던 메뉴, 아이콘이 나온다. 클릭하면 메뉴들이 나오는 효과는 java를 사용했다. Dream Coding Home Gallery Weddings FAQ Bookings twitter IG .container { width: 100vw; height: 100px; background: #000029; color: whi..

span, div를 함께 수식해줬는데도 span은 나타나지 않는다. (span은 내용을 입력해줘야 나타나기 때문!) 이렇게 html에서 내용을 추가해주면 결과창에 나온다. span은 공간이 있으면 한줄에 내용들이 나온다. 하지만 이 형식을 바꿀 수 있는 방법이 있다. display: block;을 입력해주면 div에서처럼 블럭형식으로 출력된다. div에서 display: inline;을 해주면 아무것도 나오지 않는다.(div 태그에 아무 내용도 없기 때문!) 하지만 display: inline-block;을 해주면 빈 공간에 일렬로 블럭이 출력된다. position을 쓰기 전에는 위치를 바꿔주는 코드들이 적용되지 않는다. 기본값이 static으로 정의되어 있기 때문이다. 그래서 이를 변경해주기 위해서는 ..

CSS(Cascading Style Sheet) author style -> user style -> browser (우리가 지정한 스타일이 가장 우선순위) Selectors Universal * type Tag ID #id Class .class State : Attribute [] 실제 예를 살펴보자. 전체 태그, id, class 별로 사용하는 법을 간단하게 적은 코드들이다. 가장 맨 위에 * {~} 을 이용해서 전체 컬러를 초록색으로 바꿔놓았지만 아래에 좀 더 세부적으로 태그를 적용하니 각각의 컬러들이 바뀐다. 태그 안은 비어있어서 background를 지정해줘도 나타나지 않았지만 width, height를 css로 추가해줬더니 나타났다. button:hover { color: red; backg..

코딩 유튜버 분들의 프론트엔드 영상을 도장깨기중..! 오늘은 드림코딩 엘리님의 영상들을 정주행했다. 워니님, 조코딩님의 영상을 보면서 무작정 페이지를 하나 완성했었다. 근데 그 뒤에 엘리님 영상으로 짧은 개념 영상을 봤더니 더 구조가 잘 이해됐다. 어제 무작정 썼던 코드를 오늘은 이래서 썼구나.. 하고 알게되었달까..! HTML 페이지를 박스별로 나눠보자! 오늘 영상에서 가장 꿀팁. 모든 웹페이지를 볼 때 마다 header, nav, main, aside... 등의 구조로 나눠보라는 것! 다른 웹페이지를 보면서 이건 어떻게 만들었을까.. 막막했었는데 이렇게 구조를 보는 연습을 하고 났더니 대충 감이 오는 것 같다. 큰 틀에서 점점 세분화 되는 매력이 있다. html 위키 백과 화면을 분할해본 사진이다. ..

전공 과목을 들을 때도 그동안 파이썬을 주로 다뤘었다. html을 수업 시간에 잠깐 다뤘던 적이 있지만 깊게 배워본 적은 없었다. 프론트엔드 백엔드를 아우르는 개념을 익히고 싶다는 생각을 했다. 파이썬을 하다가 문득 숲을 봐야하는데 나무를 보는 느낌이 들었달까..? 그래서 일단 도전! 나의 올해 모토다. 성장. 도전! 오늘은 조코딩님 유튜브 영상을 보면서 구글 검색창을 만들어보는 페이지를 만들었다. 일단 완성된 모습을 보여드리자면..! kyeongxseon.github.io/google-html/ Koogle kyeongxseon.github.io 내 이름 이니셜 따서 koogle로 지어보았다.. 코드를 칠 때 마다 육안으로 확인이 가능하다보니 아주 재밌다. vscode를 설치해서 사용했다. 따로 로그인..