# 레이아웃

25개의 포스트

코드이그나이터4 뷰 다루기 - 14 - 레이아웃

레이아웃 사용하기 많은 사이트들이 레이아웃을 사용합니다. 공통의 헤더, 공통의 푸터 등 어느 페이지에서나 사용되는 공통 화면들이 있고, 본문만 바뀌는 경우가 많습니다. 이렇게 공통된 부분은 한 곳에 모아두고, 본문만 바뀌는 것을 레이아웃이라고 부릅니다. 코드이그나이터

2021년 3월 26일
·
0개의 댓글

[배민문방구] Day2. 레이아웃 구성 시작

매일 11시 stand up 미팅으로 전일 진행상황 및 금일 계획, 이슈사항을 10분 이내로 공유하는 시간을 갖기로 하였다. 금일 계획 메인 헤더 레이아웃 상품 컴포넌트 레이아웃 팀원 공동사용 CSS 내 (폰트, 버튼/a 태그 속성 등) 추가 아쉬운 점 구글폰트가

2021년 3월 17일
·
0개의 댓글

[TIL] # 21 Westagram Main 레이아웃

어젠 로그인 구현까지 끝냈다.. 하나 만드는데 많은 시간이 걸리고 삽질도 여러번 한 것 같다.오랜시간 작업을 하는데 그에 따른 성과가 못나온게 아쉽다.오늘도 레이아웃 삽질을 실컷하겠구나 ! css는 정답이 없고 너무 광범위하다.그래도 간편하게 사용 할 수 있는 자주 쓰

2021년 2월 25일
·
2개의 댓글
post-thumbnail

[TIL] #18 Westagram | Login |

1\. HTML 작성2\. CSS 스타일3\. JavaScript 코딩div가 몇개로 쪼개지면 좋을까flex 속성사용툴 사용 color값 확인가능cmd + shfit + 4 => 캡처도구로 width/height 값 살펴보기박스 main으로 크게 감싸주고, 그 밑엔

2021년 2월 23일
·
2개의 댓글
post-thumbnail

CSS | 레이아웃

레이아웃을 설정할 수 있는 CSS는 여러가지가 있다. HTML은 순서대로 페이지에 그려지는 반면 CSS는 위치에 상관없이 설정을 할 수 있다. 레이아웃은 구성 요소를 배치하는 것이다. 배치하며 분할, 정렬 등 원하는 기준에 맞게 배치하여 페이지를 만드는 것이다. 레이아

2021년 2월 17일
·
0개의 댓글
post-thumbnail

가운데 정렬이 이렇게 쉽다고?

어딘가에 정리해두지 않으면 분명 까먹을게 뻔하기에 여기에 올려놓고 자주자주 참고해보자 😘

2021년 2월 3일
·
0개의 댓글
post-thumbnail

[도쿄의 사계] 프로젝트 기획안 / 레이아웃

What⭐︎ 도쿄의 사계 > ## How⭐︎ 도쿄의 사계절 안에서 내 취향에 맞는 관광 명소를 매칭하기! 설문조사 형식으로 답변을 선택하면 내 성향에 어울리는 관광지를 매칭해서 소개해 주는 서비스. > ## Why⭐︎ 어린 나이에 홀로서기로 시작해 어느덧

2021년 1월 7일
·
0개의 댓글
post-thumbnail

[인스타 클론] 사이트제작-박스모델 분석

멘토님께 인스타 클론 사이트를 제작하라는 퀘스트를 받았다.아직 html과 css 밖에 모르는데 js는 심지어 아직 개념에 대한 수업만 조금 받았을 뿐인데, 이런 나도 제작이 가능할까?우선 새롭게 설계하기 전에 로그인 페이지를 검사, 분석했다.크게 section이 있었고

2021년 1월 4일
·
0개의 댓글
post-thumbnail

10일차 (12-18-2020)

벌써 금요일이다. 시간이 정말 빠르게 간다. 1주차 보단 덜 힘들지만, 그만큼 좀 불안하다. 뭔가 성실히 안해서 덜 힘든게 아닌가 싶다. 더욱 열심히 해서 꼭 HA통과 하자 ...오늘은 어제의 마지막 CSS Selector에 이어 앱 웹 화면 설계하기를 하였다. 오늘의

2020년 12월 18일
·
0개의 댓글
post-thumbnail

포트폴리오 웹사이트 제작기 #2. 페이지 기획

인하우스에 있을 당시 페이지 제작은 아래와 같은 플로우로 진행됐다. 1) 페이지 기획 2) 디자인 작업 3) 퍼블리싱 4) 개발 이 순서대로 페이지 기획을 하려는데, 파워포인트보다 더 좋은 툴은 없을까 고민이 됐다. 다행히 찾아보니 카카오 오븐(https://

2020년 12월 5일
·
0개의 댓글
post-thumbnail

웹 표준 사이트들의 레이아웃 구성

웹 표준 사이트의 레이아웃 구성에 대하여 배워보자 (참조 https://wtss.tistory.com/168)html, css로 간단하게 레이아웃을 구성할 수 있다.id선택자의 widrh100%; 속성값은 기본값이므로 생략한다.(중복되거나 생략할수있는 코드들은

2020년 11월 28일
·
0개의 댓글
post-thumbnail

[TIL] #8 레이아웃 <div>, float

HTML은 원래 위-아래 순으로 요소들을 나열하며 내용을 표시하는 언어!단순히 나열하는 화면이 아닌, 우리가 평상시에 접하는 웹 페이지의 레이아웃 구성을 위해서는&lt;div> 태그를 많이 사용한다. divCSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그:

2020년 11월 19일
·
0개의 댓글
post-thumbnail

레이아웃이 뭔지 알려좀 주쇼

한 방을 임으로 들어 간다고 했을 때 그 방이 더럽다면 우리는 그 방에 오래 있기 싫을 것이다.웹도 마찬가지고 사이트가 지저분 하다면 볼일만 보고 바로 나가고 싶을 것이다. 그럼 보기 좋은 웹을 만들기 위한 기본 레이아웃을 한번 총 정리를 해보자.postion웹 문서

2020년 11월 17일
·
0개의 댓글
post-thumbnail

TIL.[CSS] 레이아웃에 대해서

CSS에서 레이아웃이란 웹 페이지의 요소들을 취합하는 것 뿐만 아니라, 요소들의 기본값 위치 뿐 아니라 부모 속성 혹은 메인 창 등과 비례해 어느 위치에 놓일 것인 지를 표현하는 것을 의미한다. 레이아웃 기술은 display, 그리드, float, position 등

2020년 11월 17일
·
0개의 댓글
post-thumbnail

[CSS] Layout

모든 요소들은 display value가 정해져 있으며, 대부분 요소들의 default값은 block(block-level 요소) 혹은 inline(inline 요소)이다.&lt;div>는 가장 표준적인 block-levl 요소이다. block-level 요소는 새로운

2020년 11월 17일
·
0개의 댓글
post-thumbnail

CSS - 6. 레이아웃

200918 레이아웃, 시맨틱요소

2020년 9월 18일
·
0개의 댓글
post-thumbnail

CSS_3. 레이아웃

CSS layout

2020년 9월 17일
·
0개의 댓글
post-thumbnail

flex

(1번 이미지)flex는 레이아웃 겉을 감싸고 있는 container와 내부의 item으로 이루어져있다.(2번 이미지)container에 부여해야하는 속성과 item에 부여해야하는 속성이 나뉘어있다.(3번 이미지)부모의 값인 container에 display:flex;

2020년 9월 9일
·
0개의 댓글
post-thumbnail

TIL 36 | HTML/CSS, position/display/float

position 속성 1.relative relative는 별도의 property를 지정하지 않으면, static과 동일하게 동작한다. 태그의 위치를 살짝 변경하기 위해서 position: relative; 를 사용하면 좋다. 지정된 element의 위치를 변경하려

2020년 8월 19일
·
0개의 댓글
post-thumbnail

[Kotlin] 레이아웃

레이아웃은 여러 요소들을 배치할 수 있는 캔버스라고 생각할 수 있을 것 같다. 레이아웃 위에 내가 넣고 싶은 요소들을 원하는 대로 배치하고 머릿속에 있는 어플리케이션의 화면을 레이아웃을 통해 구성해낼 수 있는 것이다.오늘 살펴볼 레이아웃은 3가지가 있다.컨스트레인트 레

2020년 8월 2일
·
0개의 댓글