본문 바로가기

분류 전체보기

 (68)
front-end 국비과정 일차 8학습일지 CSS에서 사용되는 핵심속성1 css 속성 block요소 : width와 height값을 가질 수 있다 모든 면에 margin, padding값을 줄 수 있다 lnline요소 : width와 height값을 가질 수 없다 윗면, 아랫면의 margin, padding값을 가질 수 없다. 1 박스 모델 width : 요소의 가로나비를 설정한다. 기본값 :auto height : 요소의 세로 너비를 설정한다. 기본값 :auto max-width , max-height: 요소가 가질 수 있는 최대 가로/세로 너비를 설정한다 기본값:none min-width , max-height: 요소가 가질 수 있는 최소 가로/세로 너비를 설정한다 기본값:0 css에 사용되는 단위 px:픽셀 %: 상대적 백분율 em: 요소가 가진 글꼴 크기 rem: 루트..
front-end 국비과정 7일차 학습일지 html(자주 사용되는 태그) css(선택자와 가상 클래스,요소 선택자) html에 핵심적으로 사용되는 요소들 div태그: 1 의미를 가지지 않는 블록 요소이다 2주로 레이아웃을 잡을때 사용한다 h1~h6태그: 1제목을 의미하는 블록 요소이다 2 숫자가 작아질수록 중요도가 높아진다 3h태그는 숫자를 순차적으로 작성해야 한다 p태그: 1문장을 의미하는 블록 요소이다 2주로 문단에 단락을 만들때 사용된다. img태그: 1이미지를 삽입하는 인라인 요소이다 2 alt(대체 택스트)와 src (이미지 경로)를 필수로 작성해 줘야 한다. ul태그 1순서가 없는 목록을 의미하는 블록 요소이다 2li태그와 함깨 사용되는데 이때 li태그는 목록을 구성하는 item에 하고 블록 요소처럼 동작한다. ol태그 1순서가 있는 목록을 의미하는 블록 요소이다 2li태그와 함깨 사용되는데 이때 li태그는..
front-end 국비과정 6일차 학습일지 HTML 프런트엔드 개발이란 무엇인가? html, css, javascript 각종 framework를 이용해 인터페이스(gui)를 구현하고 그것으로 사용자와 상호 작용 할 수 있는 페이지를 개발하는 것 비즈니스 로직(business logic)이란? (백앤드에서 수행한다) 웹 사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘 HTML(Hyper Text Markup Language) :markup 언어로 웹사이트에 구조를 만든다 css (Cascading Style Sheets) : 색상 크기 폰트 레이아웃 등을 제어하여 시각적으로 페이지를 꾸민다 (정적이다) JavaScript: html과 css로 만든 정적인 페이지에 동적인 기능을 추가하여 생동감을 부여한다 통신 프로토콜이란? 컴퓨터나 원거리..
css grid grid란? 행 과열을 이용해 레이아웃을 잡는 기능을 하는 속성이다 grid는 flex와 유사하게 container(부모 요소)에 사용되는 속성과 items(자식 요소)에 사용되는 속성이 나뉜다 container에 사용되는 속성들 display : grid, inline-grid = container(부모요소)에 grid를 사용하겠다고 선언하는 기능이 있다 grid와 inline-grid의 차이 = gird는 container가 수직으로 쌓이고 inline-grid는 container가 수평으로 쌓인다 이때 items에 레이아웃에는 영향이 없다 grid-template-rows : 명시적으로 행(가로줄)을 생성하고 items(자식요소)의height값을 설정한다. 이때 행의 크기를 하나하나 설정하는데 크기..
css flex flex : container(부모 요소)와 items(자식 요소)를 이용하여 요소를 정렬하는 방법이다 flex로 요소를 정렬하기위해선 부모 요소가 필수적이고 flex를 명시하는 것도 부모 요소에 해야 한다. flex를 사용함으로써 container(부모요소)와 items(자식 요소)에 사용 가능한 속성이 다르다 ex) home about information 위코드와 같이 li의 부모 요소인 ul태그에 flex를 설정하여 li태그를 수평 정렬했음을 확인할 수 있다 container(부모 요소)에 사용 가능한 속성 display:flex와 inline-flex flex와 inline-flex의 차이점 flex와 inline-flex는 itmes(자식요소)가 수평으로 쌓인다는 공통점이 있지만 flex는 c..
css 애니메이션 과 다단 animation: 요소에 애니메이션 효과를 제어한다. 이때 애니메이션 이름과 지속시간은 필수적으로 명시해야 한다. @keyframes : animation-name과 연결하여 어떻게 animation이 동작할지 실질적인 내용을 명시한다 @keyframes 사용예시) keyframes는 주로 단계별로 어떤 효과를 사용할지 %를 이용해 나타낼 수 있는데 이때 0%는 시작 지점 100%는 끝 지점 중간에 50%를 명시해서 중간지점을 만들 수 있고 세부적으로 25%, 30%,75% 등등으로 원하는 단계에 애니메이션 효과를 다르게 부여 할 수 있다. animation-name: @keyframes에 이름을 명시함으로써 animation-name속성을 가진 요소에 @keyframes에 동작 내용과 다른 anima..
css 전환(Transitions)과 변환(Transforms) 전환(Transitions) : 전환 효과를 설정하여 중간에 애니메이션을 넣어준다 transition-property : 전환 효과를 부여할 css속성에 이름을 설정한다. 기본값:all transition-property의 속성값 1 all : 해당 요소에 모든 css속성에 전환 효과를 부여한다. 2 속성이름: 명시한 css속성에만 전환 효과를 부여한다 transition-duration : 전환 효과의 동작 시간을 설정한다 기본값:0s transition-duration의 속성값 숫자를 이용하여 동작시간을 명시한다 ex) transition-duration : 5s; transition-delay : 전환 효과의 대기시간을 설정한다 기본값:0 transition-delay의 속성 값: 숫자를 이용하여 ..
css background- background: 요소의 배경과 관련된 내용을 설정한다. background-color: 요소의 배경 색상을 설정한다. 기본값 :transparent(투명색) ex) 이때 color의 값으로 핵사 코드#000000, rgb(), rgba() 등등도 들어갈 수 있다. background-image : 요소의 배경에 하나 이상(여러개 image)의 이미지를 삽입할 수 있다. 이때 하나의 요소의 url를 여러 개 작성하여 여러 장의 이미지를 삽입할 수 있다. 이때 background-image는 요소하나의 여러 가지 이미지를 넣을 때 url과 url사이 , 로구분한다. 기본값 : none 속성값 none : 이미지 없음 url("이미지 경로") ex) 주의사항 : 하나의 요소의 여러 장의 이미지를 삽입하면..

티스토리툴바