HTML17 HTML과 CSS로 구글 메인 페이지를 만들어보자! 2 https://conquer-it.tistory.com/114 ↑↑ 헤더부분은 다 만들었으니까 메인 화면을 만들 차례이다. 1. 메인 화면의 모든 레이아웃 생각해보기 뭐...flex 사용한다고 한다면 대충 이렇게 짜면 되지 않을까? 2. 구글 로고 만들기 이미지를 가져다 써도 되지만 그냥 내가 만들기로 했다. 그리고 클릭했을 때 링크 걸린게 없기 때문에 a태그는 넣지 않았다. h1태그 안에 한글자씩 span 태그에 넣어 만들었다 (G대신에 K 넣고 싶어서 넣었다.) Koogle (폰트도 바꿔야되는데) 3. 검색창 만들기 일단 HTML을 작성해보면 form태그 안에 모든 요소를 넣었다. CSS를 적용하지 않으면 이렇게 나오는데 CSS를 적용해서 정렬하고 form태그의 border 주고 텍스트 박스의 bor.. 2022. 7. 25. HTML과 CSS로 구글 메인 페이지를 만들어보자! 1 오늘 만들어 볼 것은 구글 메인 홈페이지이다. 뭔가 큰 기업치고 디자인이 단순해 보여서 한번 도전해보고 싶다는 생각이 들었다. 그리고 아래 footer부분만 반응형으로 처리하면 될거 같아 시작했다. 1. 일단 레이아웃을 나눠보자! 이게 아닌거 같긴 하지만 일단 나눠봤다... 2. 타이틀부터 만들기 Google 정보 스토어 Gmail 이미지 k [CSS 코드] /* ----------------------전체 해당--------------------------- */ body{ margin: 0; } li{ list-style: none; display: inline; } a{ text-decoration: none; font-size: 15px; } a:hover{ text-decoration: unde.. 2022. 7. 24. HTML과 CSS로 Spotify 메인 홈페이지를 만들어보자! 스포티파이 홈페이지를 먼저 보여주자면 이렇게 생겼다. 생각보다 단순하게 생겨서 한번 시도를 해 봤다. 일단 위 사진처럼 크게 3개의 레이아웃을 만들어서 그 안에 차곡차곡 작은 레이아웃을 짜야겠다고 느끼게 되었고 많은 생각을 한 후 만들기 시작했다. (하나하나 만들 때마다 과정을 써야되는데 완성할 생각만 하다보니 중간 과정 쓰는걸 까먹었다...) [HTML 코드] Spotify 프리미엄 지원 다운로드하기 | 가입하기 로그인하기 다양한 해외 히트곡과 국내 인기 음악을 들어보세요 1개의 모바일 기기에서 7일 동안 무료로 Spotify Premium 멤버십을 이용해보세요. 결제세부 정보는 필요하 지 않습니다. 다운로드 하기Google Play App Store에서 다운로드 하기 약관이 .. 2022. 7. 23. [HTML/CSS] HTML과 CSS로 tap 메뉴 만들어 보기(JS x) 탭 메뉴는 많은 곳에서 사용하고 있다. 예로는 아래와 같은 네이버 로그인 창이 있다. 위 같은 다양한 탭 메뉴를 만들기 위해서는 자바스크립트도 필요하긴 하겠지만 간단한 탭 정도는 CSS로도 만들수 있다. 일단 HTML로 간단한 뼈대를 만들어준다. 라디오 버튼을 사용하여 요런 탭 메뉴를 만들 것이다. 색상이나 디자인은 일단 대충대충~ [HTML로 뼈대 잡아주기] 첫번째 두번째 세번째 첫번째 첫번째 탭 입니다. 두번째 두번째 탭 입니다. 세번째 세번째 탭 입니다. 1. wrapper라는 클래스명을 가진 div 태그로 전체를 묶어주고, 2. 라디오 버튼 3개를 만들어 준 후 각각 라벨을 지정해 준다. *(나중에 라벨을 눌러도 라디오 버튼이 바뀌게 하기 위해서 라디오 버튼의 첫번째는 checked를 설정해서 미.. 2022. 7. 22. 이전 1 2 3 4 5 다음
