본문 바로가기

HTML CSS

(20)
취업사이트 만들기) 마이페이지 작성 https://notion6780.tistory.com/110 https://notion6780.tistory.com/111 1.취업사이트 설계2.로그인페이지 작성이 끝났다. 이번에는 회원을 위한 마이페이지를 작성해봤다. header> div class="inner"> div class="head__container"> div class="head--title" onclick="location.href='mainscreen_login.html';">Humanist div> div class="head--buttoncontainer"> div class="head--button" onclick="location.href='signin_..
취업사이트 만들기) 로그인 페이지 작성 https://notion6780.tistory.com/110 지난 시간에는 취업사이트 대략적인 설계와 준비작업을 진행했고 이번에는 시안을 참고해 html과 css파일을 설계했다. 시안 두 파일의 스타일에 공통점이 많으므로 하나의 css파일로 스타일을 정의한다.signin.htmlsignup.htmlsignup.css 로그인 페이지body> header> div class="inner"> div class="head__container"> div class="head--title" onclick="location.href='mainscreen.html';">Humanistdiv> div class="head--buttoncontainer"> ..
취업사이트 만들기) 준비작업 시안을 바탕으로 html css sql 문서를 작성하는 연습프로젝트 시안회원가입, 로그인, 이력서작성, 목록검색 기능이 있는 웹페이지의 형태다. ⭐깃허브 작업 1.레파지토리 생성2.로컬에 깃클론, css img 폴더생성, 커밋, 푸시3.원격지에 dev 브랜치 생성4.콜라보레이트(팀원초대) ⭐ html과 css 역할분담 1안과 2안은 기능이 겹치며 기능의 단순성을 고려해 팀장 1명이 담당3,4안을 각 1인이 담당했음5안은 복잡성을 고려해 최고경력자 1인이 담당했음 ⭐ mysql 작업 5안의 시안을 참고해 table 설계column명은id, idphoto, name, email, phone, address, fieldwork, skill, experience 등이 있다.id는 자동, idphoto는 추후 h..
html/css) 플렉스 flex flexbox플렉스박스css3에서 도입된 레이아웃 모델이다. 요소를 수평 수직으로 정렬하고 공간을 분리한다. display: flex 부모 컨테이너가 flex 속성이어야 한다 flexbox의 유효범위는 자식 요소까지만 유효하다 그러면 주축 방향, 교차축 방향이라는 개념이 생긴다 flex-directon: row, column.. 주축 방향 정렬: justify 교차축 방향 정렬: align flex wrap 화면이 작아지만 자동으로 요소 줄바꿈하기 css의 상속 부모요소의 스타일이 자식에 전달되는 것 color, font.. 등은 상속된다. 우선순위는 !important 인라인 id class tag 순이다 Flexbox의 기본 개념Flexbox를 잘 사용하려면 몇 가지 기본 개념을 먼저 이해해야 합니다..
html/css) 포지션, 트랜지션 position위치 지정요소의 위치를 어떻게 배치할지 설정한다. static: 기본값, 문서 흐름에 따라 배치(기본 위치). relative: 문서 흐름에 따라 배치되지만, top, left, right, bottom으로 원래 위치에서 상대적으로 이동. absolute: 문서 흐름에서 벗어나며, 가장 가까운 position이 relative/absolute/fixed인 부모 요소를 기준으로 top, left, right, bottom으로 이동. fixed: 문서 흐름에서 벗어나며, 뷰포트(화면)를 기준으로 top, left, right, bottom으로 이동(스크롤해도 고정됨).주의.relative, absolute, fixed를 사용할 때는 top, left, right, bottom 속성을 함께 설정..
html/css) 폰트 font 관련 속성 ch16폰트 속성 font properties family, size, weight style, height.. font(family, size, weight..) 단축속성 웹폰트 pc에 폰트가 없으면? 구글폰트 예제)html 구문 body> h1>나는 기본 폰트야h1> h1 class="gaegu">안녕 나는 gaegu 폰트야h1> h2 class="roboto">안녕 나는 roboto 폰트야h2> p class="sunflower">안녕 나는 sunflower 폰트야p> body> 구글웹폰트 링크link rel="preconnect" href="https://fonts.googleapis.com" /> link rel="preconnect" href="https:..
html/css) 디스플레이 display 속성, 인라인 inline & 블록 block ⭐디스플레이 display 속성html 요소가 화면에 어떻게 표시될지를 결정한다. block: 요소가 한 줄을 모두 차지하고 새로운 줄에서 시작한다. div, h1, p inline: 요소가 한 줄 안에서 다른 요소와 나란히 배치된다. span, a inline-block: 한 줄에 나란히 배치되며 width, height, margin, padding을 설정할 수 있다. ⭐ visibility 속성 visibility 속성은 요소의 가시성을 제어한다. visible: 요소를 보이게 한다. hidden: 요소를 숨기지만, 공간은 차지한다. display: none과 비슷해 보이지만 차이점이 있다. display: none: 요소를 숨기고 공간도 제거한다. visibility: hidden: 요소를 숨기..
html/css) background 배경 관련 주요 속성 background-color: 배경색background-image: 배경이미지background-repeat: 배경이미지의 반복 설정background-position: 배경 이미지 위치 설정background-size: 배경 이미지 크기 설정background-attachment: 배경 이미지 스크롤 동작 설정 예제)body> div class="box"> h2>배경이미지 예제h2> p>배경이미지가 중앙에 위치하며 반복되지 않습니다p> div>body> box 클래스 스타일 정의 .box{ width: 100%; height: 500px; background-color: darkmagenta; ..