전체 글

# 유연한 상자 만들기 Flexbox Flexbox : 유연함을 가진 일차원 레이아웃을 만들 수 있다 가로축 정렬 : justify-content 세로축 정렬 : align-items 유연성 조절 : flex-grow, flex-shrink 크기 조절 : flex-basis 축 바꾸기 : flex-direction 여백과 순서 : gap, order .wrapper { display: flex; /*내부 요소 가로로 나열*/ flex-direction: column; /* 축 지정 속성 - 기본 값은 가로*/ } 아래의 HTML 코드에 CSS를 적용해서 Flexbox 속성에 대해 알아보자 콘텐츠1 콘텐츠2 콘텐츠3 .wrapper { display: flex; /*내부 요소 가로로 나열*/ flex-di..

지금까지 배운 HTML과 CSS를 종합해서 간단한 페이지를 만들어보는 시간이다 전체 소스코드를 올릴 수는 없어서 클론코딩을 하면서 알아두면 좋을 내용들을 간략하게 정리하고 완성된 페이지를 포스팅 하려고 한다 # header, main, footer는 레이아웃을 구성하는 태그 한 페이지 한 파일 안에 반드시 한번만 나와야 함 검색엔진이 페이지에 들어오면 header 태그부터 찾아서 어디가 제목인지 파악한다 header 안의 h1을 찾으면 이것이 페이지의 제목이라는 것을 검색엔진이 알게 된다 main 태그와 footer 태그도 검색엔진에게 해당 부분이 main이고 footer 임을 알려줄 수 있다 JINNY # a 태그 href 속성 중 mailto:이메일주소 -> 메일 폼 생성해주는 링크이다 # 블록레벨요..

# 반응형 반응형이란? 하나의 웹사이트에서 PC, Tablet, Mobile 등 접속하는 기기의 화면 크기에 맞게 사이트가 자동으로 반응하는 기법 적응형이란? 접속하는 기기에 따라 PC용 웹사이트, 테블릿/모바일용 웹사이트를 보여주는 기법 #HTML 반응형 페이지를 만들기 위한 메타 태그 viewport meta 태그를 추가하여 페이지가 호출될 때 보이는 화면을 어떻게 계산해서 보여줄지 정의 name : 메타태그 중 viewport를 사용하겠다고 선언 content : viewport 가 가진 content 값 지정하여 사용 - width : 브라우저에게 페이지의 가로 너비 계산하는 방법 알려줌, device-width 지정 시 접속하는 기기의 브라우저 너비에 맞게 페이지 맞춰줌 - initial-sca..

# 박스 모델 - 크기 지정, 여백 안녕하세요 반갑습니다 정지은 실습 중이다 .box { width: 700px; height: 700px; background-color: #ddd; } .inner-box { width: 100%; height: 100%; max-width: 50%; } 위의 코드를 적용하면 inner-box의 width가 box class의 크기에 맞춰 100%로 700px가 될 것 같지만 max-width 가 50% 이기 때문에 350px가 최대임, max-height도 동일 margin. padding 은 네 면을 한번에, 각각 지정해 줄 수 있음, padding 도 아래 코드와 동일하게 적용됨 margin: 10px; /*네 면 모두 적용*/ margin: 10px 20px; ..

데이터의 중복을 줄이고, 무결성을 향상시키는 정규화 # Normalization 목적 테이블 간의 중복된 데이터를 허용하지 않기 위함 중복된 데이터를 만들지 않으면, 무결성을 유지할 수 있고 데이터베이스의 저장 용량 또한 효율적으로 관리할 수 있음 - 데이터의 중복을 없애면서 불필요한 데이터를 최소화시킴 - 무결성을 지키고, 이상 현상을 방지 - 테이블 구성을 논리적이고 직관적으로 할 수 있음 - 데이터베이스 구조 확장에 용이 # 정규화 단계 제 1 정규화 -> 제 2 정규화 -> 제 3 정규화 -> BCNF -> 제 4 정규화 -> 제 5 정규화 ... 의 단계 일반적으로 제 3 정규화 또는 BCNF 까지만 하는 경우가 많음 # 정규화 장점 - 데이터베이스 변경 시 이상 현상을 제거할 수 있음 - 정규..

# 단위 고정 단위 소수점 사용 X 권장 px : 픽셀은 정확한 크기를 나타내야 할 때 사용, 가장 일반적으로 사용 pt : 일반적으로 문서 등에서 사용, 웹에서 자주 사용되지는 않음 상대 길이 단위 브라우저 기본값 16px em : 요소의 글꼴 크기에 상대적인 단위, 합성 값, line-height, letter-spacing 등에서 주로 사용 div { font-size: 50px; } div p { font-size: 1em; } div p a { font-size: 2em; } rem : 합성을 피하기 위해서 만들어진 단위, 전반적인 레이아웃, 폰트 크기 작업 을 할 때 많이 쓰임 div { font-size: 50px; } div p { font-size: 1rem; /*16px 기준*/ } d..

HTML 수업이 끝나고 CSS 시작하는 날이다 CSS는 너무 복잡하고 기능이 다양해서 어려웠는데 이번 기회에 확실하게 개념을 잡고 가야겠다 # CSS CSS란? Cascading Style Sheets, 웹 문서를 꾸미기 위한 Style Sheet 언어 선택자 { 속성1 : 값1; 속성2 : 값 2; .... } 내부 CSS : 웹 문서 안에서 스타일 작성 외부 CSS : 별도의 파일을 만들어서 스타일 코드 관리, 가장 많이 사용되는 방식 body { color: red; } div { color: blue; } inline CSS : 태그에 직접 스타일 정의, 코드 유지보수 어렵고 반응형 처리 불가능 등 사용 지양 안녕안녕 반가워 CSS 주석 : /* ..... */ , 개발자 도구로 볼 수 있기 때문..

# 리스트 , :정렬되지 않은 목록 태그 태그를 사용하여 목록 구성, 다양한 태그 포함 태그의 자식은 무조건 태그만 가능함 , : 정렬된 목록 태그 1,2,3 ... 형식으로 목록을 그림 태그의 자식 요소는 무조건 태그만 가능함 리스트 리스트 리스트 리스트 리스트 순서가 없는 하위 리스트 , , : 설명 목록 태그 태그가 전체를 감싸고 가 제목 가 설명 안녕 만나서 반갑다 # 표 : 표를 만드는 태그 : 행 : 열 : 열의 제목 태그, 기본적으로 글자 굵게, 가운데 정렬 : 제목 그룹 태그, 하나의 테이블 안에서 한번만 사용 : 표의 본문 태그, 하나의 테이블 안에서 한번만 사용 : 표의 바닥글 태그 : 표 설명 태그 - 셀 병합 옵션 : colspan="병합하고 싶은 칸의 수" 셀 제목은 th로 셀 제..