목록전체 글 (175)
Learn & Record
1. 활용 나이 계산하기 (결과 값 표시하기) - 변수 선언 - 이름은 의미가 있게 만든다 - 단어의 연결일 때는 뒤의 단어의 첫글자를 대문자로 한다.(카멜법) - 선언을 할 수 없는 이름도 있다 - 문자, 밑줄, 달러기호, 숫자만 사용 할 수 있고, 숫자는 앞에 오지 못한다. 나이 계산하기 (결과 값 표시하기) - thisYear을 프로그램이 실행되는 시점의 연도를 가지고 오도록 - birthYear을 사용자에게 입력을 받도록 나이 계산하기 (결과 값 표시하기) 2. 산술연산자 3. 복합대입 연산자 4. 증감연산자 : 복합 대입 연산자를 약간 간략하게 사용한 형태 - a++ : 기존의 변수 값에 1을 더함. 후위 - ++a : 기존의 변수 값에 1을 더함. 전위 - a-- : 기존의 변수 값에 1을 뺌..
1. flex 자식 요소의 배치방법 지정하기 - 특징은 float, inline-block 처럼 배치할 요소에 속성을 지정하는 것이 아니라 부모 요소(컨테이너)에 속성을 지정 - display : flex - 자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정 - display : inline-flex - 자신은 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정 - flex-direction - 자식 요소의 정렬 방향 변경하기 - flex-direction : row - flex의 기본축을 가로로 지정. 주축을 가로로, 교차축을 세로로 지정. 기본값 - flex-direction : column - flex의 기본축을 세로로 지정. 주축을 세로로 교차축을 가로로 지정. - flex-d..
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)..
1. Semantic Tag (시맨틱 태그) - 시맨틱 구조 - 검색 엔진 같은 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와주는 지능형 웹 - 어떤 요소가 어떤 내용 또는 태그를 포함할 수 있는 지에 관한 정의 - 웹 페이지의 구조를 더욱 쉽게 이해 - 의미 요소를 가진 태그 - 자신의 컨텐츠를 명확하게 정의 - 코드의 가독성을 높이고 의미를 명확하게 해주는 장점 - 컴퓨터의 정보를 이해, 논리적인 추론이 가능한 구조 - 시맨틱 태그 종류 - header - 머리말 의미, 헤더, 로고, 네비게이션, 검색창, - 페이지 맨 위쪽에 삽입하는 머리말을 의미 - 주로 로고를 중심으로 네비게이션 메뉴와 검색 창이 들어가며, 내비게이션 메뉴는 태그로 구성 - nav - navigation 줄임말..
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 속성..
1. box 요소 - border : 테두리굵기, 스타일, 색상 - margin : 바깥쪽 여백 - padding : 안쪽 여백 - 박스 block 속성 - 마진 margin 속성 : 박스의 바깥쪽 여백, 주로 박스 간의 간격 설정에 주로 사용 - 패딩 padding 속성 : 박스의 안쪽 여백, 박스 안쪽의 콘텐츠 간격을 설정할 때 주로 사용 - 박스의 실제 넓이와 높이 공식 - 한개의 박스에 margin * border * padding값이 모두 적용되었다는 가정 - width 속성과 height 속성은 텍스트가 들어가는 영역(contents)의 넓이와 높이를 지정 - 전체넓이 : width + 2 * (margin + border + padding) - 전체높이 : height + 2 * (margi..