조충희의 개발 블로그

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..

flexbox플렉스박스css3에서 도입된 레이아웃 모델이다. 요소를 수평 수직으로 정렬하고 공간을 분리한다. display: flex 부모 컨테이너가 flex 속성이어야 한다 flexbox의 유효범위는 자식 요소까지만 유효하다 그러면 주축 방향, 교차축 방향이라는 개념이 생긴다 flex-directon: row, column.. 주축 방향 정렬: justify 교차축 방향 정렬: align flex wrap 화면이 작아지만 자동으로 요소 줄바꿈하기 css의 상속 부모요소의 스타일이 자식에 전달되는 것 color, font.. 등은 상속된다. 우선순위는 !important 인라인 id class tag 순이다 Flexbox의 기본 개념Flexbox를 잘 사용하려면 몇 가지 기본 개념을 먼저 이해해야 합니다..

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 속성을 함께 설정..

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:..

⭐디스플레이 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: 요소를 숨기..

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; ..

css 박스 모델 html 요소를 네모난 상자들로 표현하는 모델 content 예제) body> div class="box">div 태그 박스 모델div> div>div태그2div> div> pre> 요소 크기 계산해보기 전체 너비 = width + 좌우패딩 + 좌우보더 + 좌우마진 전체 높이 = height + 상하패딩 + 상하보더 + 상하마진 박스 모델 크기를 계산하는 기준 box-sizing: content-box 기준(기본값) width: 200px 값을 준다면 컨텐츠만 지정되는 개념 pre> div> body> 전체 스타일 정의 ..

css 선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 속성선택자의 사용법을 적어본다. ⭐속성선택자 html 요소의 속성이나 속성값을 보고 대상을 구분한다.태그 이름이나 클래스, id 대신 요소의 속성을 본다. 문법대괄호([])를 사용속성 이름만 쓰거나 속성값과 매칭시켜 선택 예제)다음 html 구문의 스타일을 정의body> input ..