월드스토리의 코딩 나라

태그의 크기를 지정하는 약어 CSS 용어의미속성width, height요소의 가로/세로 너비auto : 브라우저가 자동으로 너비 계산단위 : px, em, vw 등 단위로 지정max-width, max-height요소가 커질 수 있는 최대 가로/세로none : default(최대 너비 제한 없음)auto : 브라우저가 자동으로 계산단위 : px, em, vw 등 단위로 지정min-width, min-height요소가 작아질 수 있는 최소 가로/세로0: default(최대 너비 제한 없음)auto : 브라우저가 자동으로 계산단위 : px, em, vw 등 단위로 지정Calc()사용자가 원하는 크기 값을 계산하여 사용하기 위해 사용하는 값EX) width : Calc(100vh - 20vw)box-sizei..

글자 설정을 바꾸는 CSSCSS 지시어의미속성font-weight글자의 두께 지정normal : 기본두께(400)bold : 두껍게(700)bolder : 상위(부모) 요소보다 두껍게lighter : 상위(부모) 요소보다 앏게100~900 : normal과 bold 이외의 두께 지정font-size글자 크기 지정16px : 글자 설정의 defaultpx, em, rem 등의 단위로 지정하기 가능% : 부모 요소의 폰트 크기에 대한 비율smaller : 상위(부모) 요소보다 작은 크기larger : 상위(부모) 요소보다 큰 크기xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기 지정line-height  한 줄의 높이 지정 숫자 : 요소의 글꼴 크기의 배수로 지정단위..

CSS 기본 용어 정리용어 선택자(Selector)HTML 의 Style을 지정하기 위하여 HTML 테그를 선택하기 위한 수단.속성(Property)HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의함.여러 개의 프로퍼티를 연속해서 지정할 수 있으며, 세미콜론(;)으로 구분함속성은 이미 지정되어 있는 용어이며, 사용자가 임의로 정의하지 못함.값(value)해당 속성에 대하여, 키워드나 크기 단위, 또는 색상 단위로 표시되어 있는 실제 값 CSS의 기본 선택자 용어의미사용법전체 선택자(Universal Selector)모든 요소를 선택함* {    color : red;}= 전체 태그에 대해서 빨간색 글씨로 써라.태그 선택자(Type Selector)태그의 이름에 대해서 선택 ..

CSS(Cascading Style Sheet)1. 웹 페이지를 디자인하기 위해 사용하는 언어 개발자 도구○ 브라우저에서 개발 편의를 위해 제공하는 도구로 F10을 누르면 활성화된다.○  현재 보고 있는 웹페이지를 구성하는 HTML, CSS, javascript를 볼 수 있다.○ 화면을 돌리면 원상태로 복구되겠지만, 화면을 수정하여 변경하는 것도 가능하다.○ 특정요소 코드 보기 및 수정 / 크기 줄이기 / 화면의 사이즈를 줄여서 반응형 확인하기. CSS의 참조 방식인라인(inline 방식) 1. 각 태그마다 스타일에 변화를 주고 싶을 때 사용2. 테그마다 스타일을 설정하는 것이기에, CSS 코드의 재사용이 불가능하다.내장 Style 1. 태그 내부에서 Style을 선언하여 사용하는 방식2. 동일한 조건..

5. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - select 태그의 모습태그의 유형사용 목적선택 폼 생성1. 어떤 내용을 선택하는 부분을 생성하는 태그속성 - Name : select 박스의 이름선택 폼의 옵션1. 실제 선택할 내용을 생성하는 태그속성● Value : 실제적으로 전달되는 값● Selected : 최초로 선택되는 값으로 설정● Disabled : 보이지만 선택할 수 없는 옵션으로 만듬option을 묶는 태그1. option을 그룹화하는 태그속성★ Label : 그룹화하는 옵션의 그룹명을 결정 6. 테이블을 생성하는 테그 - table태그의 모습 사용목적속성테이블을 생성• border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding ..

3.  이미지나 하이퍼링크를 표현하는 데 사용되는 태그태그의 모습태그의 유형사용 목적이미지 테그1. 이미지를 넣을 때 사용되는 테그2. 속성 값 중 하나인 src가 여기서 사용됨3. 이미지 로드가 안될 때 표시되는 문자는 alt4. 프로그램 내 파일을 가져오거나, 인터넷 링크를 통해 이미지 표시 가능하이퍼링크1. a는 Anchor의 약어2. 속성값 href는 Hypertext Reference 의 약자, 이동할 페이지 링크3. target : 링크 된 페이지를 열었을 때, 문서가 열릴 위치를 표시★ _blank :새로운 텝에서 내용을 염★ _self : 현재 탭에서 (기본 값) 4. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - Input 태그의 모습태그의 유형사용 목적버튼 태그특정 함수를 수행..

1. 문자의 구조를 형성하는 태그태그의 모습태그의 유형사용 목적제목 태그1. 제목을 뜻하는 Heading의 약자, h 사용!2. 제목을 뜻하는 테그이기 때문에 자동 줄 바꿈처리 되며, 하나의 HTML 문사에 하나의 H1 테그를 권장함.3. 웹 검색 엔진이 제일 먼저 검색하는 테그본문 태그본문을 적기 위한 테그로 paragraph의 약자줄 바꿈 태그 한 줄을 그냥 비우는 테그라고 보면 됨.리스트 작성 태그1. 순서가 없는 목록을 작성 함(●이 기본값)1. 순서가 있는 목록을 작성 함(기본 값은 1, 아라비아 숫자 등 스타일 변경 됨)1. 두 테그 내부에서 내용을 작성하는 태그줄긋기 태그 수평으로 된 줄을 그어주는 태그 2. 문자를 디자인하는데 사용되는 태그태그의 모습사용 목적두껍게 강조하기 위한 태그두껍게..

HTML(Hypertext Markup Language)1. 마크업 언어 : 테그를 이용해서 프로그램의 구조를 짜는데 사용되는 스크립트 HTML의 기본 구조HTML 문서는 기본적으로 로 시작실질적인 문서는 2번쨰 행부터 시작되며, 과 사이에 작성됨 사이에는 HTML 문서 정보를 정의하는 코드가 포함됨(제목, 저장방식, 브라우저의 크기)웹 브라우저의 출력 요소는 몸통을 뜻하는 바로 아래에 위치한다.HTML 요소(Element)는 시작 테그(Open)과 종료(Closing) 그리고 테그 사이의 내용으로 이루어짐 태그- HTML 문서의 메타 데이터와 문서를 정의하는 사용되는 테그들이 위치하는 곳- 메타 데이터 : 데이터에 대한 기본적인 출저 정보를 제공하는 데이터- 화면에 표시되는 요소는 아니지만, 그..

팀 프로젝트의 주제부트캠프를 통해 학습한 HTML, CSS, JavaScript, jQuery를 활용하여 첫번쨰 홈페이지를 제작하게 되었다.우리 팀은 소니의 음향기기 분야를 주제로 홈페이지를 리뉴얼해보기로 하였다.주제를 선정한 이유소니는 업체의 기원이라 할 수 있는 음향기기부터 카메라, 게임기, 스마트폰 등 복합적인 전자기기를 개발, 유통하는 회사이다. 따라서 홈페이지 또한 여러 전자기기가 복합적으로 섞여있는 구성을 갖고 있다. 하지만 소니의 뿌리라 할 수 있는 사업분야는 음향기기 사업이다. 그래서 음향기기를 전문적으로 다루는 홈페이지를 제작해보기로 논의한 끝에 결정하였다. 나의 담당 업무 1주일이란 짧은 개발 기간과 몇주 동안 공부했던 짧은 식견을 바탕으로 하였기에, 일단, 메인페이지, 화사에 대한 소..

요소의 변환효과를 주는 함수 #. transform 2차원 변환함수1. translate(x,y) : 이동(x축, y축), translateX(x), translateY(y) : 한 축으로만 이동2. scale(x,y) : 크기를 늘리는 함수, scaleX(x), scaleY(y) : 한 축으로만 키움(배수)3. relate(degree) : 특정 각도로 테그를 회전시킴  예) 30deg4. skew(x,y): x,y 축으로 값만큼 기울임, skewX(x),skewY(y) : 특정 축으로만 기울임5. matrix(n,n,n,n,n,n) : 2차원 변환 효과 3차원 변환 함수.  transform 함수를 보충하는 속성  1. backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여..