목록Dev/HTML CSS JS (20)
Learn & Record
HTML CSS JavaScript (flex, direction, warp, justify-content, align, item, content, 연습문제, Boolean, 비교 연산자, 자료형 검사, var, let, const, 형변환)
1. flex 자식 요소의 배치방법 지정하기 - 특징은 float, inline-block 처럼 배치할 요소에 속성을 지정하는 것이 아니라 부모 요소(컨테이너)에 속성을 지정 - display : flex - 자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정 - display : inline-flex - 자신은 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정 - flex-direction - 자식 요소의 정렬 방향 변경하기 - flex-direction : row - flex의 기본축을 가로로 지정. 주축을 가로로, 교차축을 세로로 지정. 기본값 - flex-direction : column - flex의 기본축을 세로로 지정. 주축을 세로로 교차축을 가로로 지정. - flex-d..
HTML CSS Javascript (Table 테이블, 테이블 병합, 연습문제, position 속성, absolute, 폰트, 자바스크립트 )
1. Table 테이블 - 표는 웹 페이지에서 자료를 정리 때 자주 사용하는 요소, 실제는 게시판이나 회원 가입 페이지의 레이아웃 만들 때 사용 - 기본적으로 몇줄(=행), 몇칸(=열) 이라고 불리움 (행, 열) | 표를 이용한 형태를 만들 때 사용하는 태그 - table 구조 - table > tr > td - 칸의 기본적인 성격 y축상의 middle - table 관련 태그 - table : table 전체를 감싸는 태그 - tr("table row") : 테이블의 행을 의미하는 태그, 자손으로 th나 td가 반드시 있어야 한다 - td("table data") : 테이블의 일반 행(칸)을 의미하는 태그, 부모인 tr안에 있어야 한다 - base style : 왼쪽정렬 (text-align:left)..
HTML CSS (Semantic Tag 시맨틱 태그, 연습문제, form 태그, form 특성/요소, text, password, checkbox, radio, file, color, date, etce, textarea)
1. Semantic Tag (시맨틱 태그) - 시맨틱 구조 - 검색 엔진 같은 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와주는 지능형 웹 - 어떤 요소가 어떤 내용 또는 태그를 포함할 수 있는 지에 관한 정의 - 웹 페이지의 구조를 더욱 쉽게 이해 - 의미 요소를 가진 태그 - 자신의 컨텐츠를 명확하게 정의 - 코드의 가독성을 높이고 의미를 명확하게 해주는 장점 - 컴퓨터의 정보를 이해, 논리적인 추론이 가능한 구조 - 시맨틱 태그 종류 - header - 머리말 의미, 헤더, 로고, 네비게이션, 검색창, - 페이지 맨 위쪽에 삽입하는 머리말을 의미 - 주로 로고를 중심으로 네비게이션 메뉴와 검색 창이 들어가며, 내비게이션 메뉴는 태그로 구성 - nav - navigation 줄임말..
HTML CSS (선택자, 태그 선택자, 아이디 클래스 선택자, 후손 자손 선택자, table 태그, form 태그, 동위 선택자, 반응 선택자, 구조 선택자, 형태구조 선택자, 상태 선택자, 복합 ..
1. 선택자 - 전체 선택자 - 모든 웹페이지에 빠지지 않고 사용하는 선택자로 웹 페이지 시작 전 초기화시키기 위해서도 사용 - body 안에 있는 태그뿐 아니라 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum LoremLoremLoremLorem ipsum 3. 아이디, 클래스 선택자 - 아이디 : 아이디 속성을 가지고 있는 태그를 선택 - 클래스 : 특정한 클래스를 가지고 있는 태그를 선택 good morning good morning good morning good morning good morning - id는 고유값이어야 하지만, 스타일시트에서는 id 속성 중복이 문제가 되지 않음 - 하지만 자바스크립트는 id 속성..
HTML CSS (box요소, display, 레이아웃, float 속성, float-clear, 중첩박스, box-sizing 속성, 연습문제, lsit style, inline, block, overflow, display, scroll box, 목록 스타일)
1. box 요소 - border : 테두리굵기, 스타일, 색상 - margin : 바깥쪽 여백 - padding : 안쪽 여백 - 박스 block 속성 - 마진 margin 속성 : 박스의 바깥쪽 여백, 주로 박스 간의 간격 설정에 주로 사용 - 패딩 padding 속성 : 박스의 안쪽 여백, 박스 안쪽의 콘텐츠 간격을 설정할 때 주로 사용 - 박스의 실제 넓이와 높이 공식 - 한개의 박스에 margin * border * padding값이 모두 적용되었다는 가정 - width 속성과 height 속성은 텍스트가 들어가는 영역(contents)의 넓이와 높이를 지정 - 전체넓이 : width + 2 * (margin + border + padding) - 전체높이 : height + 2 * (margi..
HTML CSS (CSS, CSS 지정 방식, 스타일시트, 아이디선택자, 스타일의 우선순위, 상위 하위 속성, block, inline, box, box 설정 요소)
1. CSS - 각 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어로, - 홈페이지의 스타일 즉 디자인 요소를 담당 - 선택자(Selector) { 속성 : 값;} - 스타일은 기본적으로는 마지막에 작성된 순서대로 표현되어짐 - 스타일 문법의 종류 - 외부 스타일 시트 - 외부에 작성된 CSS문서 즉 스타일 시트 파일을 연결하여 적용하는 방법 - 내부 스타일 시트 - 태그를 사용하여 CSS 스타일을 적용하는 방법 - - 인라인 스타일(Inline style) - HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 - 2. CSS 지정 방식 - 클래스 선택자 - 본문 (class='name') / 스타일(.name) - 특정한 이름을 부여하여 선택하는 선택자로, ..