웹프로그래밍

이번 여름방학동안에는 프론트엔드 개발을 배워보려고한다.그 전에 프론트엔드와 백엔드에 대해서 아주아주 생략해서 간단하게 알아보겠다.웹이나 앱서비스 제공을 위해서는 서버와 클라이언트가 필요하다.클라이언트 - 사용자서버 - 사용자가 원하는 기능을 제공하고 결과를 보여주는 제

참고>부스트 캠프의 비전공자를 위합 HTML/CSS를 보고 공부했음https://www.boostcourse.org/cs120/joinLectures/33586

\-> 내용을 제목처리해준다.h1~h6까지 있으며 숫자가 작을수록 큰 수준의 제목\->문단을 나눠줌빈태그로 종료태그가 없다. \-> 엔터키의 기능을 함, 단순 줄바꿈빈태그로 종료태그가 없다.

CSS로 표현할 수 있음, 모두 빈태그가 아니다. 글자를 굵게 표현한다. 글자를 기울려서 표현한다.글자에 밑줄을 표현한다.글자에 중간선을 표현한다.

\-> 결과 화면

링크를 생성해서 해당 위치로 이동할 수 있도록 한다.이동할 위치이다. 내부링크라면 id속성을 이용해 선언한다.👉실행화면<a href="회사 소개"\_self" 속성값: 현재 창에 표시 (기본으로 설정되어 있다.)"\_blank"속성값: 새로운 창에 표시👉실행화

주요 태그들에 대해서 알아보자~!(≧∇≦)ﾉ<h1>이것은 제목이에요</h1>\-> 내용을 제목처리해준다.h1~h6까지 있으며 숫자가 작을수록 큰 수준의 제목<p>\->문단을 나눠줌빈태그로 종료태그가 없다. <br>\-> 엔터키의 기능을 함, 단순

📋오늘의 목표📋 이미지 요소 ``태그 이미지 삽입을 위한 태그, 빈태그로 종료태그가 없다. 📄이미지태그의 속성값 src: 이미지 경로를 지정한다.(필수) alt: 이미지 대체 텍스트를 지정한다.(필수) width,height: 텍스트의 크기를 지정한다.(선

📋오늘의 목표📋 테이블 요소 `` : 표를 나타내는 태그 (표) `` : 행을 나타내는 태그 (행) `` : 제목 셀을 나타내는 태그 (데이터 셀) `` : 셀을 나타내는 태그 (데이터 셀) 표는 가로로 그리기 때문에 한 행에 몇개의 열이 있는지를 기준으로 본

📋오늘의 목표📋 📕폼(FORM)이란? 사용자가 텍스트를 입력하고나 선택하고 클릭하는 행위를 통해 서버에 전달하는 경우 ``요소 내용이 없는 빈태그로 type속성을 통해 다양한 입력형태를 만들 수 있다. 📖type="text" 단순한 텍스트를 입력한다.

🎯오늘의 목표🎯 📕콘텐츠 모델 요소가 가진 특성들에 따라 요소의 종류를 정의 Flow Content Sectioning Content Heading Content Phrasing Content Embedded Content Interacitve Content

📋오늘의 목표📋 📕시멘틱 마크업 시멘틱(Semantic) : '의미론적인' 🏅시멘틱마크업이란 > 기계가 잘 이해할 수 있도록 코드를 짜자 1.의미에 맞는 태그와 요소를 쓰가 2.문서를 잘 구조화하기 📖어떤 코드를 쓰는게 좋을까? 아래 코드들은 사용자가 보

부모 요소의 가로 영역에 맞게 꽉 채워서 표현된다.양옆으로 다른 요소가 배치되지 않게 박스 위아래로 줄 바꿈이 생긴다. <div>,<h1>,<p>,<ul>,<li>,<table>등이 있다.자신의 내용만큼만의 박스를 만들고 줄바꿈이 일어나

📋오늘의 목표📋

css의 선택자에 대해서 알아보자내가 꾸미고 싶은 html 요소를 선택해야한다.선택자에 해당하는 문서 내 해당하는 태그를 모두 꾸며준다.선택자를 그룹화할 수 있다.선택자를 그룹화 할 수 있다.선언을 그룹화 할 수 있다.전체 선택자 \* : 성능에는 좋지 않다.🤔 동일

📋오늘의 목표📋 📕 가상 선택자 지금 문서내에 존재하지 않는 요소에 스타일을 부여하고 특정 요소를 추정해서 스타일을 부여하는 선택자. 가상 클래스 가상 요소 📖 가상 클래스 > 조건 발생 시 규칙이 적용될 수 있도록 만든 특수한 클래스 ex> 커서가 위에

선택자를 얼마나 명시적으로 선언했느냐태그 입장에서 어떤 규칙이 제일 명시적으로 선언했느냐(구체성)을 보고 스타일을 적용함.\*\*0, 0, 0, 0 👉왼쪽에 있는 숫자가 클수록 높은 구체성을 가진다.\`p✍️예시코드h1 { ... } : 0,0,0,1body h1 {

구체성이 같은 두 규칙이 동일한 요소에 적용된다면?👉 캐스캐이딩의 단계적인 규칙에 따라 동작한다.중요도: !important출처 : 제작자, 사용자, 사용자 에이전트(브라우저에 내장된 css)<우선순위> 1\. 사용자 !important2\. 제작자 !impor

🎯아래 선택자 조합에서 item2가 선택되지 않는 것을 고르시오.

웹개발을 할 때 여러 환경에서도 디자인을 동일하게 사용되고 호환성이 높다.디자인 의도가 높을 때 사용 추천👏웹에 인쇄용 문서 스타일을 지정할 때 유용하다.사용하는 기기에 따라 달라짐 따라서 권장하는 가이드가 아니다.상위요소에 정의된 픽셀을 기준으로 퍼센트를 지정한다.

색상명으로 지정한다. 각 자리수마다 r,g,b를 나태며 0부터 255까지의 값이 가능하다.0에 가까워질수록 검정색rgb(0,0,0)클수록 하얀색rgb(255,255,255)기존의 rgb값에서 마지막에 투명도를 지정하는 알파(a)값을 지정a값은 0=투명, 0.5=반투명,

배경을 설정하는 css속성은 다양하게 있는데, 보통 맨 마지막에서 설명한 background 속성을 사용하고 값을 지정한다. 값은 공백으로 구분해서 지정한다.위의 코드는 여러 값을 background를 이용해 지정한 것이다. 어떤 뜻인지는 더 살펴보자.배경의 색상을 지

html의 박스모델 📒 content 영역\- 요소의 실제 내용이 있는 영역입니다.📒 Padding 영역\- content 영역과 테두리 사이(boder)의 여백을 말한다.\- content영역이 배경,색 또는 이미지가 있을 때 영향을 받는다.\- content 영

boder : content를 감싸는 테두리선다양한 속성과 속성값을 사용해서 선의 굵기, 모양, 색상을 지정할 수 있다.\-border속성을 이용해 값을을 한번에 설정할 수 있다.border-width: 10px색의 지정방식은 위에서 다뤘던 값들을 한번에 사용할 수 있

padding은 크기만 지정할 수 있음.위쪽 오른쪽 아래쪽 왼쪽으로 지정한다.padding-top, padding-right, padding-bottom, padding-left으로도 지정이 가능하다.📒 속성값length : 고정값으로 지정합니다. (ex. px, e

padding 관련 속성처럼 크기를 적용할 수 있다.위쪽 오른쪽 아래쪽 왼쪽으로 지정한다.margin--top, margin--right, margin--bottom, margin--left으로도 지정이 가능하다.📒 속성값length : 고정값으로 지정합니다. (ex

요소의 content영역의 너비를 지정하는 값이다.인라인 레벨 요소를 제외한 모든 요소에 적용된다.auto : 기본 값으로 적용된다. 브라우저가 자동으로 계산해서 적용한다.length : 절댓값으로 px,em등의 값을 가질 수 있다.percentage : 컨테이닝 블록

🔥오늘의 목표🔥

ex : 소문자 x의 높이em : T나 g를 고려한 폰트의 전체 높이Baseline : 소문자 x를 기준으로 한 하단 라인Ascender : 대문자 T처럼 소문자x를 넘어가는 영역이다.Descender : 소문자 g나 y처럼 Baseline을 넘어 아래로 쳐지는 영역이

line-height영역의 높이를 지정한다.📒속성값nomal : 기본으로 설정되어 있는 값이며 보통 1.2이다.number (상대값) : font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다. 상대값이라는 걸 주의하자!단위(절댓값) : px,em등 고정 수치

폰트의 크기(대문자 "M"의 크기)를 지정한다. 📒 속성값 medium웹브라우저에서 정한 기본 글자크기입니다.midium에 대한 키워드사용자의 기본 폰트 medium에 대한 상대적인 크기이다. 브라우저마다 다르게 정의되어 있어 잘 사용하지 않는다. (브라우저마다 값

폰트의 굵기를 지정한다.📒 속성값키워드 : \- normal : 기본 값 (400) \- bold : 굵게 표현(700) \- bolder : 부모 요소 보다 두껍게 표현 (사용 지양) \- lighter : 부모 요소 보다 얇게 표현 (사용 지양)number

font-style : 글꼴 기울기font-variant : 소문자를 대문자로font-weight : 글꼴의 굵기 font-size : 폰트 사이즈 (필수)line-height : 글꼴의 줄 간격 조절 font-family : 폰트 지정 (필수)글꼴 속성의 축약형※ 실

시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우이미지 폰트 : 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우정

전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 사용가능한 최대 너비를 가진다.한 줄에 하나의 블럭요소만 위치할 수 있다.🔸예시 : <div>, <h1>, <p>🔹크기 지정width, height로 크기를 지정할 수 있음padding, m

정렬 알아보기텍스트의 정렬을 지정하는 속성이다.📒 속성값left : 텍스트를 왼쪽으로 정렬right : 텍스트를 오른쪽으로 정렬center : 텍스트를 중앙으로 정렬justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)📖 블록레

텍스트의 들여쓰기를 지정하는 속성이다.📒 속성값length : px, em 등 고정 수치로 지정. 음수 가능하다.% : 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.밑줄을 지정하는 속성이다.밑줄 위치

요소안에 공백을 어떻게 처리할지에 대한 속성.📒 속성값normal : 연속 공백과 개행문자를 하나의 공백으로 처리한다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.nowrap : 연속 공백을 하나로 친다. 자동 줄바꿈은 일어나지 않고, <br>요소에서

어떤 요소의 렌더링 박스 유형을 결정하는 속성이다.📒 속성값none : 요소가 렌더링 되지 않음inline : inline level 요소처럼 렌더링block :block level 요소처럼 렌더링inline-block : inline level 요소처럼 렌더링(배치

🔥오늘의 목표🔥 📕 visibility

요소의 흐름을 조정하는 속성이다.📒속성값none: 기본 속성, 요소를 띄우지 않는다.left: 요소를 왼쪽으로 띄운다.right: 요소를 오른쪽으로 띄운다.🔸 특징요소를 보통의 흐름에서 벗어나 띄어지게 함.주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음.대부

웹문서 안의 요소들을 원하는 곳으로 이동시킬 때 사용한다.position과 offset을 가지고 위치를 조정한다. 📒 속성값에는 static, absolute, fixed, relative, sticky이 있으며 각 속성 별로 offset을 가지고 위치를 조정할 수

요소가 겹치는 순서를 지정하는 속성이다. 단위없이 숫자로만 선언한다. (음수 사용 가능)가장 큰 값이 가장 위쪽에 온다.📒 속성값auto : 쌓임 순서를 부모와 동일하게 설정(기본값)number: 해당 수치로 쌓임 순서를 설정(음수 허용)🔸특징position값이 s

🔥오늘의 목표🔥 📕 유효성 검사 웹표준 검사라고 한다. (기계적인 문법검사만 가능) 직접 들어가니까 url, 파일 업로드, 실제 코드삽입이 가능하고 에러와 경고를 줬다. 경고는 무시하라고 했다. 닫는 태그라던가, 단위 오류등을 잡아낼 수 있는 것 같다. 자주

각 미디어 매에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 (반응형 사이트)한 웹페이지는 다양한 미디어 매체로 보여질 수 있다. ex)스크린리더기, 프린터기, 모니터 등 다양한 매체가 있다.👉 특정 미디어 매체따라서 특정한 디자인을 적용할 수 있어야한다.me

하나의 웹사이트로 데스크탑, pc, 태블릿 pc등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지다.대부분의 모바일기기의 웹브라우저 렌더링 영역은 뷰포트 영역보다 크기 때문에 스크롤기능이 필요하다.이때 실제 렌더링되는 영역을 뷰포트와 동