본문 바로가기

HTML9

나의 첫 웹사이트 만들기_(1) 현재 JS를 제대로 배우지 않은 상태에서 HTML과 CSS만으로 웹페이지를 구성해보기로 했다. 어떤 주제로 만들어볼지 고민을 했는데 마땅히 할 것이 없어서 나에 대한 소개페이지를 만들기로 했다. 코드 🔽 https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage 계획 위의 청사진처럼 만들어볼 계획이다! 1일차 헤더 부분과 소개 섹션, 스킬 섹션을 만들어보았다! flexbox를 연습해보기에 아주 좋았다! 헤더의 position을 fixed로 설정하면 float되어 있어서 그 다음에 나오는 요소는 그 아래에 배치가 된다. 그 해결법으로 margin을 header의 높이만큼 적용을 시켜주었다. 마우스를 올렸을 때 다음과 같은 효과들을 넣어주었다. 1. 블로그 환.. 2022. 2. 4.

티스토리 스킨 커스텀! (w. HTML & CSS) html과 css를 어느 정도 배워서 드디어 이 블로그를 내 입맛대로 바꿔볼 수 있게 되었다! 그동안 염원해왔던 것들을 만들어보았고 점점 추가하거나 제거할 예정이다. 직접 바꿔보니 너무 재밌고 계속 더 공부하고 싶어졌다! 티스토리도 계속 좋은 방향으로 바꿔보면서 얻어낸 경험으로 나의 웹사이트도 제작해볼 예정이다. 1. 모바일 환경 카테고리 초상화 변경 초상화의 크기를 바꾸어 주었다. 바꾼 코드 @media screen and (max-width: 767px) #aside .sidebar-1 .profileBox ul li { width: 100%; height: 17em; } 미디어 조건을 통해서 모바일 환경의 해상도의 경우에 해당 선택자에 속성을 부여해주었다. 2. 글꼴 변경 바꾼 코드 @import .. 2022. 1. 31.

HTML & CSS 활용 프로젝트_ 카드셔플 & 디스펜싱 코드 .container{ width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box{ width: 100px; height: 130px; border: 1px solid #000; border-radius: 5px; position: absolute; top: 35%; left: 40%; } .btn{ width: 50px; height: 50px; border: 1px solid #000; } .box1{ background: crimson; z-index: 1; } .box2{ background: darkorange; z-index: 0; } .box3{ background:gold; z-index: 0; } .b.. 2022. 1. 28.

HTML & CSS 활용 프로젝트_ 고양이 댄스 애니메이션 만들기 코드 *,*::after,*::after{ box-sizing: border-box; } .container { width: 200px; height: 150px; border: 2px solid #000; animation: background 2s linear 0s infinite normal ; position: relative; } .ground { width: 196px; height: 45px; bottom: 0px; position: absolute; background: rgba(37, 37, 37, 0.884); } .wall { width: 190px; height: 130px; left: 5px; background-size: contain; background-repeat: no-r.. 2022. 1. 16.

HTML & CSS 활용 프로젝트_ 버튼 조작 게임 만들기 지금까지 배운 내용만을 활용하여 버튼 조작을 할 수 있는 간단한 게임을 만들었다! 코드 github(https://github.com/Bluishhot-Star/WEB/tree/master/HTML%26CSS/Btn_game) KASSID GAME VICTORY! *, *::after, *::before { box-sizing: border-box; } .title { width: 325px; text-align: center; font-weight: bold; font-size: 25px; } .game { width: 325px; height: 380px; padding: 10px; position: relative; border: 2px solid #000; background-color: gray.. 2022. 1. 14.

HTML 시멘틱 태그 (레이아웃 설계) semantic : 의미론적인, 의미를 가지고 있는 HTML5 이전에 레이아웃을 구성할 때 div에 클래스를 부여하며 구성하였다. 이는 html파일이 길어지고 div를 계속 반복해서 사용해야한다. 그 이후 sementic태그의 등장으로 효율적이고 직관적으로 구성할 수 있게되었다! 종류 .container : 가장 상위 section : 주제별 컨텐츠 영역 header : 헤더 영역(로고, 메뉴 등) footer : 푸터(제작 정보 등) aricle : 컨텐츠 내용 nav : 문서 링크 탐색 main : 문서 주요 내용 지정 단계 .container>section, header, footer>article>div 레이아웃 만들어보기(가상클래스 X) .container { border: 1px solid #.. 2022. 1. 5.

HTML 핵심 태그들 HTML 핵심 태그 공부한 것들 기록! 문단, 텍스트 서식 h1~h6 제목 태그 p / br 문단 구분, 줄 바꿈 / br은 특별한 경우 아니면 쓰지 않는 것을 추천! b / strong 굵게 (strong은 시각장애인을 위한 html 작성 시에도 쓰임) u 밑줄 s / del 취소선 (del은 시각장애인을 위한 html 작성 시에도 쓰임) big / small 글자 크게, 작게 sup / sub 위 첨자, 아래 첨자 hr 수평선 목록 ul / ol 로 한 번 감싸고 그 안에 li 로 목록 수를 조절 순서가 없는 목록 ul > li Unordered List 1 2 3 4 순서가 있는 목록 ol > li Ordered List 1 2 3 4 중첩 중요!) 중첩 시 자식 노드는 li 안으로 들어가야 함! .. 2021. 12. 31.

HTML&CSS EMMET (w.VSCODE) EMMET이란? html이나 css 등의 코드를 작성할 때 효과적으로 시간을 단축시켜주는 확장기능! 입력 후 Tab키 or Enter키 누르기! HTML ! & html:5 html 표준 DTD문서 ! >>> link 링크페이지 link >>> link:css, favicon 등 link:css >>> . div 태그생성 . >>> .(클래스명) 지정한 클래스명 가진 div태그 생성 .title >>> #(id명) 지정한 id명 가진 div태그 생성 #title >>> 태그명.(클래스명) 태그명#(id명) span.title >>> span#title >>> > 자식 노드로 추가 table>tr>td >>> *로 여러 개를 한 번에 생성 가능 table>tr>td*3 >>> + 형제 노드로 추가 div>.. 2021. 12. 30.

스파르타 코딩 클럽 신년운세 패키지 후기! 스파르타 코딩클럽 서포터즈 르탄즈🔥🧑‍💻 . 이번에는 무료로 제공된 '신년운세패키지' 특강을 듣고 난 후기 컨텐츠를 제작해보았습니다! HTML과CSS를 다뤄보았고 아주 조금이지만 JS맛보기까지 경험해볼 수 있었습니다.🙂 서포터즈 활동으로 강의를 수강한 것이지만 '내가 직접 값을 지불하고 선택한 강의라면?' 이라는 관점에서 수업에 참여를 했는데요! 스파르타만이 가지고 있는 장점들 덕분에 정말 흥미있게 들을 수 있었습니다😄 그리고 지난 1주 차의 활동 덕에 우수활동자로 선정이 되어서 5주 간 정규강의를 수강할 수 있는 기회를 얻게 되었습니다!🔥 그 후기는 추후에 모든 강의를 듣고 난 후 작성해보도록 하겠습니다!! 2021. 11. 26.

이전 1 다음

티스토리툴바