전체 글84 position, vw,vh(반응형웹사이즈!), z-index position속성과 함께 position속성 좀 더 알아보기 가상요소와 함께 vw(view width), vh(view height) 단위와 함께 - 반응형 사이즈! z-index와 함께 그라디언트 인라인블럭은(텍스트 양만큼의 크기) marging=0 auto를 쓸 수 없다. 여백은 다음컨텐츠의 소유! 인라인 요소에 position: absolute를 주면 인라인요소가 아닌..그냥 박스가되는것.. 자식요소에 abosulute, 부모요소에 relative 기준 점이 부모요소로 바뀐다. 기본은 뷰포트 기준. **사용 빈도가 굉장히 높음! position : absoulte 에서 기준점을 좌/우/상/하 의 기준점을 주면.. 블럭라인 엘리먼트와 비슷한 특성을 띄게 된다. 사용 가능한 공간이 최대치로 생기는것... 2022. 4. 10. position (transform/position) 레이아웃의 핵심 Position 위치를 조절 할 수 있는 Position속성 position속성의 다양한 옵션 transform속성 알아보기 position속성의 다양한 옵션들 다루어보기 relative absolute relative + absolute의 조합형태 absolute로 가운데 정렬하기 absolute로 확장 레이아웃 구현 https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. developer.mozilla.org transform 은 정중앙이 기준점이며, 다른.. 2022. 4. 8. HTML 시멘틱 태그 머리글, 제목, 헤더. 특정한 콘텐츠의 시작부분을 나타내는 요소 제목과 관련된 부제목을 묶는 태그 사용 안함 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현. 주로 a요소와 함께 사용. 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그. 핵심 콘텐츠와 관련이 있기는 하나, 콘텐츠 전체 흐름과 크게 관련이 없응 콘텐츠. ex)콘텐츠 추천, 광고 등. 독립성이 있음 콘텐츠의 독립성 유무에 따라 section/article 나뉨/ heading(~ )사용을 권장 - 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. (독립적) - 말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여.. 2022. 4. 8. Flex Box (justify-content와 align-items/flex-grow와 flex-shrink/flex-wrap/flex-direction) flex box (아주 중요합니다) - float과 함께 공부하면 좋습니다. FlexBox 동작 방식 이해하기 Main Axis와 Cross Axis margin auto 키워드 활용 justify-content와 align-items flex-grow와 flex-shrink flex-wrap FlexBox로 레이아웃 잡아보기 FlexBox로 Sidebar, Contents 구조 만들기 FlexBox로 Grid 구조 만들기 FlexBox 추가 내용 Main Axis와 Cross Axis 방향을 바꿈으로서 만들 수 있는 예시들 시작전! 블럭레벨 엘리먼트의 경우, 1) width를 미정으로 지정해주면 부모요소만큼 너비가 정해져서 공간을 가득 쓸 수 있다.(width:auto; 의미) 2) margin:aut.. 2022. 4. 7. 과제 - 수정중 HTML HOME LEMON ORANGE JAMONG CITRUS JAM Fruit dolor sit amet, Orange adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient Jamong nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim .. 2022. 4. 7. 상태 끌어올리기 (lifting state up)/폼 검증(form validation) - 상태 끌어올리기 (lifting state up) 자식컴포넌트 안에서만 쓰이던 상태를 상위 컴포넌트에서 함께 쓰고싶을때, 그 상태를 위로 끌어올리게 되며 이것을 상태 끌어올리기라고함. 부모컴포넌트로 끌어올린 후 자식 컴포넌트에서 props로 부르게되면 자식컴포넌트에서도 사용할 수 있음. -폼 검증(form validation) 2022. 4. 7. inline element 마진 병합현상 마진 병합현상은 블럭레벨 엘리먼츠끼리만(인접해 있는 상하단 마진이 겹침) 일어나는 현상. (브라우저의 의도된 현상). -> 1) 부모 요소에 overflow:hidden 프로퍼티 주기. 2) 부모 요소에 border/padding 프로퍼티 주기. (해결 방법으로 보기에는 약간 어려움) 정보성 이미지/컨텐츠는 html img src로 보통 넣고, 디자인적인 이미지는 css에서 넣는다. css 작성 순서도 중요하다. 순서대로 적지 않아도, 구체적 셀렉터의 속성이 우선적으로 적용이 된다. (selector specificty 로 우선 순위를 확인을 해보자~) 태그에 직접적인 css속성을 주면 우선적으로 무조건 이게 적용 셀렉터 프로퍼티에 !important가 작성 되어있으면 이것이 최우선순위! .. 2022. 4. 6. 함수 컴포넌트 사용해보기(헤더) 리액트의 입구 파일 main.js - JSX문법을 사용하는 곳은 리액트 모듈을 import 해줘야함 (import React from 'react';) 함수컴포넌트를 만들어서 앱의 헤더를 만들어줌. - 모듈로 등록하는것 (export default Header; ) 함수컴포넌트와 클래스 컴포넌트의 가장큰 차이는 상태의 유무 함수컴포넌트에는 스테이트가 없음. 리액티브 개념과는 상반됨. 상태가 변함에 따라 ui도 자동으로 반영되는것이 리액티브한 성질. 리액트 컴포넌트에서 ui상태로 사용할 수 있는것은 스테이트 말고 props. state가 컴포넌트 내부에서 관리하는 것이라면 props는 외부에서 들어와 내부 ui에 영향을 주는것. props를 사용하여 함수컴포넌트를 유연하게 만들어보자. (재활용 가능하도록).. 2022. 4. 6. 6. 당근게임 - 리팩토링(팝업 클래스) 코드의 모듈화! constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수 main.js에 팝업에 관련된것들을 가져와 바인딩함. 모듈화 후에는 main.js에 팝업관련된것들을 생략하고 , PopUp class를 삽입하여 작동하게 해줌. PopUp JS 'use strict'; export default class PopUp { //export -> 외부에 노출하겠다~ constructor() { //constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수 //PopUp class에 멤버변수 3개를 만들어줌 this.popUp = document.querySelector('.pop-up'); this.popUpMessage = document.querySel.. 2022. 4. 5. 이전 1 2 3 4 5 6 7 ··· 10 다음
