WEB

[WEB] html/css 레이아웃

Day8!! 오늘은 css의 마지막 날이다. html, css 레이아웃 구글링해보고 실습하기 레이아웃이란, 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. html 레이아웃 html에서는 아래의 방법으로 레이아웃을 작성할 수 있다. 이 외에도 table 요소를 이용한 레이아웃이 있지만 수정이 매우 어려워서 현재는 거의 사용하지 않는다. div 요소를 이용한 레이아웃 Header 영역 Nav 영역 Section 영역 Footer 영역 HTML5 레이아웃 웹 페이지의 레이아웃을 위한 별도의 새로운 요소(의미 semantic)를 제공한다. [header, nav, section, article, aside, footer] 오늘 배운 내용 1. html/css 레이아웃 div를 이..

[WEB/CSS] flexbox

flex : 요소들을 자유자제로 뮈치 시키는 속성 : flexbox는 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 css3에 추가된 레이아웃 방식이다. : flex-grow, flex-shrink, flex-basis의 축약속성 구성 flexbox는 자식 요소인 flex item과 상위 부모 요소인 flex container로 구성된다. 기본 사용 세팅 flexbox를 만들기 위해서는 부모 요소에 display: flex 속성을 선언하면 된다. .flex_container { display: flex; } 속성 1) 부모 속성 (container) flex-direction : flexible item이 flex 컨테이너 안에 위치되는 방법 지정 [속성값 : row, row-reverse, colu..

[WEB] CSS 기본실습(2) (flex, gird 레이아웃)

Day 7 flex, grid 레이아웃 개념과 적용 방법 구글링해보기 1. flex : 요소들을 자유자제로 뮈치 시키는 속성 : flexbox는 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 css3에 추가된 레이아웃 방식이다. : flex-grow, flex-shrink, flex-basis의 축약속성 0) flexbox - 구성 flexbox는 자식 요소인 flex item과 상위 부모 요소인 flex container로 구성된다. - 기본 사용 세팅 flexbox를 만들기 위해서는 부모 요소에 display: flex 속성을 선언하면 된다. .flex_container { display: flex; } 1) 부모 속성 (container) flex-direction : flexible item이..

[WEB] CSS 기본실습(2)

Day6!! position, margin, padding 구글링해보고 실습하기 1. position : 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성 (텍스트나 이미지를 원하는 위치로 배치할 수 있다) : static | relative | absolute | fixed | sticky static 요소를 문서 흐름에 맞추어 배치 relative 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정 absolute 원하는 위치에 지정 fixed 지정한 위치에 고정하여 배치 sticky 위치에 따라 동작방식이 달라짐. 임계점 이전에는 relative와 같이 동작/ 그 이후에는 fixed와 같이 동작 2. margin : 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기..

[WEB] CSS 기본실습

Day 5~!! font-size, color, line-height 구글링해보고 실습하기 1. font-size 개념 : 글자 크기를 정하는 속성 [px, %, em, rem] - %, em : 부모 요소의 글자 크기에 대한 상대적인 글자 크기 (100%, 1em = 부모 글자와 사이즈 같다) - rem : html 요소의 글자 크기에 대한 상대적인 글자 크기 2. color 개념 : 글자의 색상을 정하는 속성 red, blue등 이미 정의된 색 #000, #FFFFFF 등의 16진수 색상 코드 rgb(255, 255, 255) 등의 rgb 색상 rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상 3. line-height 개념 : 줄 높이를 정하는 속성 오늘 배운 ..

[WEB] HTML 기본실습(3)

Day4! 오늘 할 것은~~ id와 class에 대해서 구글링해보고 실습하기 id : 자주 사용하는 스타일에 적용하는 것 : 형태 ) #id_name{속성명: 속성값; 속성명: 속성값;} class : 자주 사용하는 스타일에 적용하는 것 : 형태 ) .class_name{속성명: 속성값; 속성명: 속성값;} id와 class의 차이점 : 우선순위가 다르다. ( id가 더 우선순위에 있다) : 즉, class와 id를 동시에 적용하면 id만 적용된다. 결과 오늘 배운 내용 1. id id의 형태는 #id_name{속성명: 속성값; 속성명: 속성값;} 2. class class의 형태는 .class_name{속성명: 속성값; 속성명: 속성값;}

[WEB] HTML 기본 실습(2)

Day 3 img/input/a 태그 구글링해보고 실습하기 1. : 다른 웹사이트로 가는 링크(하이퍼링크)를 걸어주는 태그 - 속성 1) href : 클릭 시 이동할 링크 2)target : 링크를 여는 방법 _self : 현재 페이지 _blank : 새 탭 _top : 최상위 페이지 2. : 이미지 태그 이미지의 src 속성 안에 사용한다. / alt 속성: 이미지 불러오기가 실패 할 때 화면에 보여질 글자 - 속성 1) arc : 이미지의 경로 2)width : 이미지 가로 크기 3)height : 이미지 세로 크기 3. : 입력창 의미 type은 해당 태그의 속성 type="text" 타입이라는 속성의 값이 text이다. - 속성 1) type : 입력 태그의 유형 type 속성값 기능 text 텍..

[WEB] HTML 기본 실습

벌써 Day2 !! 오늘 해볼 것은 div/span/p 태그 구글링해보고 실습하기 1. : 여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그 > div가 다르면 별도의 줄로 나눠진다. 2. : div와 같이 여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그. : div와의 차이점 ) 1) 자동 줄 바꿈이 되지 않는다. 줄 바꿈을 위해서는 태그를 사용해야 한다. 2) 박스 형태로 영역이 설정되는 div와 달리 줄단위로 영역이 설정된다. 3. : 문단을 넣을 때 사용하는 태그 결과물 오늘 배울 내용 1. p p는 문단을 넣을 때 사용하는 태그로, 굉장히 긴 텍스트를 넣을 수 있답니다~~ 엄청엄청나게 긴 텍스트도 가능해요 2. div 여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그입니다. d..

[WEB] HTML 개념 알아보기

Day 1 html, css, javascript란 무엇인지, 웹을 구성할 때 각각 어떤 역할을 하고 서로 어떠한 관계가 있는지 알아보기, html 개념 찾아보기 01. HTML - 마크업 언어, 웹페이지의 기본적인 형태를 만드는 정적 언어 - 태그와 태그로 구성되어 있음 - 웹의 구조 담당 02. CSS - 마크업 언어가 표시되는 방법(색상, 크기 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어 - 웹의 시각적인 표현 담당 03. Javascript - 브라우저 자체에서 내장된 해석기능을 이용한 클라이언트 기반의 일종의 스크립트 언어 - html과 css로 만들어진 웹페이지를 동적으로 변경해주는 언어 - 웹의 동적 처리 담당 04. html 개념 + 강의 요약 !+tab : 기본적인 html 파일 툴..