월드스토리의 코딩 나라

태그의 크기를 지정하는 약어 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 문서의 메타 데이터와 문서를 정의하는 사용되는 테그들이 위치하는 곳- 메타 데이터 : 데이터에 대한 기본적인 출저 정보를 제공하는 데이터- 화면에 표시되는 요소는 아니지만, 그..

KDT 포스코X코딩온 웹 풀스택 과정 14기   목차     1. 지원사유? - 보안소프트웨어, 자동차, 스마트홈 관련 QA파트 쪽에서 검증, 리뷰 관련 업무를 수행하다가 권고사직을 당한 이후, 앞으로 뭘 해먹고 살아야할지 고민하다가, 개발공부를 다시 시작했다. 컴퓨터 공학 전공인 관계로 개인적인 공부에는 큰 어려움은 없을 것 같았으나, 팀프로젝트와 면접 관련해서 고민이 생겼고, 한달 쉬면서 고민한 끝에 포스코와 코딩온에서 지원하는 웹개발자 풀스택 과정을 신청하여 합격했습니다.자세한 사항은 개발자 도전 사유 창을 참고해주세요. 수업기간 : 2024-09-05 ~ 2025-03-05 -OT-git 사용법-HTML 설명 및 실습 2023.09.05 [오리젠테이션 진행]- 자기소개 타임- 크루리더진 소개(알려..