문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css
wiki:css

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css [2022/10/11 18:02]
dhan 		wiki:css [2023/01/13 18:44] (현재)
줄 13: 줄 13:
  
 ===== Case Study ===== ===== Case Study =====
 +
 +===== FlexBox =====
 +<code txt>
 +float: {left, center, right}
 +이미지와 텍스트의 배치와 관련된 기능
 +
 +  container 속성
 +    display
 +    flex-direction
 +    flex-wrap
 +    flex-flow
 +    justify-content
 +    align-items
 +    align-content
 +
 +  iterm 속성
 +    order
 +    flex-grow
 +    flex-shrink
 +    flex
 +    align-self
 +
 +main axis(중심축), cross axis(반대축) 이해 필요
 +
 +EMMET(에밋)
 +div.container>div.item.item${$} 탭키
 +
 +
 +.container {
 +  background: beige;
 +  height: 100vh; /* viewport height */    
 +  display: flex;
 +  flex-direction: row
 +    row: 왼쪽에서 오른쪽으로
 +    row-reverse; 오른쪽에서 왼쪽으로
 +    column: 위에서 아래로
 +    column-reverse: 아래에서 위로
 +  flex-wrap: nowrap; 디폴트,  
 +    wrap
 +    wrap-reverse
 +  /* flex-flow: column nowrap */ flex-direction, flex-wrap 한 줄에 사용
 +  justify-content: flex-start;
 +    flex-start: 
 +    flex-end: 
 +    center
 +    space-around, space-evenly, space-between /* main axis */
 +    align-items: center; baseline(텍스트 줄맞춤)
 +    align-content: center, space-around, space-evenly, space-between
 +  
 +  
 +}
 +
 +.item {
 +  width: 40px;
 +  height: 40px;
 +  border: 1px solid black;
 +}  
 +
 +iterm 속성  
 +.item1 {
 +  backtround: #ef9a9a;
 +  flex-grow: 2; /* 늘어나는 비중 */
 +  flex-shrink: 2;  /* 줄어드는 비중 */
 +  flex-basis: 60%; /* 차지하는 비중, flex-grow, flxe-shrink와 같이 사용하지 않음 */
 +  align-self: center; /* 아이템별로 지정 */
 +}
 +  
 +.item2 {
 +  backtround: #ef9a9a;
 +  flex-grow: 1;
 +  flex-shrink: 1;
 +  flex-basis: 60%;
 +}
 +
 +.item3 {
 +  backtround: #ef9a9a;
 +  flex-grow: 1;
 +  flex-shrink: 1;
 +  flex-basis: 60%;
 +}
 +  
 +</code>
 +
 +
 +실습 [[https://jsbin.com|jsbin.com]] \\
 +컬러 [[https://material.io/resources/color/#!/?view.left=0&view.right=0|COLOR TOOL]] \\
 +[[https://flexboxfroggy.com/|Flexbox Froggy 게임]] \\
 +\\
 ===== Grid ===== ===== Grid =====
 +<code txt>
 +CSS Layout
 +flex
 +  아이템을 1차원 적으로 배치하고자할 때 사용
 +  flxe, flex(column)
 +  row, column
  
 +grid
 +  2차원 으로 배치
 +  부모 display: grid
 +  
 +    grid-template-columns: 컬럼 정의
 +      grid-template-columns: 100px 100px 100px 100px
 +      grid-template-columns: repeat(5, 100px)
 +      grid-template-columns: repeat(5, 20%)
 +      grid-template-columns: 1fr 2fr 1fr
 +      grid-template-columns: repeat(5, 1fr)
 +      
 +    grid-template-rows
 +    grid-auto-rows: 150px
 +      grid-auto-rows: minmax(150px, auto)
 +
 +    gird-template-areas: grid cell labeling
 +    grid-gap: 10px
 +      grid-column-gap: 10px
 +      grid-row-gap: 10px
 +
 +
 +  자식 grid cell
 +    grid-column-start, grid-column-end, grid-row-start, grid-row-end: 시작은 1부터 (0이 아님)
 +      grid-column-start: 2;
 +      grid-column-end: 4;
 +      grid-row-start: 1;
 +      grid-row-end: 3
 +or
 +      grid-column: 2 / 4;
 +      grid-row: 1 / 3;
 +      
 +or     
 +      grid-column: 2 / span 2
 +      grid-row: 1 / 3;
 +,     
 +      grid-column: 2 / -1
 +      grid-row: 1 / 3;
 +    
 +
 +    grid-area
 +    
 +
 +body {
 +  padding: 5rem;
 +  background-color: black;
 +}
 +
 +.container {
 +  display: grid;
 +  grid-template-columns: repeat(3, 1fr);
 +  grid-auto-rows: 150px;
 +  grid-gap: 1rem;
 +  gird-template-areas:
 +    'a a a'
 +    'b c c'
 +    'b d g'
 +    'e f g'
 +}
 +
 +.image {    
 +  width: 100%;
 +  height: 100%;
 +  object-fit: cover;
 +}
 +
 +.image1 {
 +  grid-area: a
 +}
 +
 +.image2 {
 +  grid-area: b
 +}
 +
 +.image3 {
 +  grid-area: c
 +}
 +
 +.image4 {
 +  grid-area: d
 +}
 +
 +.image5 {
 +  grid-area: e
 +}
 +
 +.image6 {
 +  grid-area: f
 +}
 +
 +.image7 {
 +  grid-area: g
 +}
 +
 +</code>
 +
 +<code css>
 +body {
 +  width: 100vw;
 +  height: 100vh;
 +  margin: 0;
 +  display: grid;
 +  grid-template-columns: 3fr 1fr; 
 +  grid-templat-rows: 100px auto 50px;
 +  grid-template-areas:
 +  'header header'
 +  'main side'
 +  'footer footer';
 +}
 +
 +header {
 +  grid-area: header;
 +}
 +
 +main {
 +  grid-area: main;
 +}
 +
 +aside {
 +  grid-area: side;
 +}
 +
 +footer {
 +  grid-area: footer;
 +}
 +
 +</code>
  
-[[https://www.youtube.com/watch?v=nxi1EXmPHRs|CSS Grid 완전 정리 끝판왕]]+[[https://www.youtube.com/watch?v=7neASrWEFEM|CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지!!]] \\ 
 +[[https://www.youtube.com/watch?v=nxi1EXmPHRs|CSS Grid 완전 정리 끝판왕]] \\ 
 +[[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트를 빨리 만드는 지름길Emmet, HJTML 빠르게 마크업하기]] \\ 
 +[[https://unsplash.com/|unsplash 무료 다운로드]] \\
  
 ===== Plugin ===== ===== Plugin =====
줄 156: 줄 379:
 ===== CSS Note ==== ===== CSS Note ====
    * [[wiki:css:css note]]    * [[wiki:css:css note]]
 +   * [[https://www.freecodecamp.org/news/how-to-center-an-image-in-css/|이미지를 중간으로(수직, 수평)]] , How to Center an Image Vertically and Horizontally with CSS
 \\ \\
 {{tag>주레피 천호동밤안개 button}} {{tag>주레피 천호동밤안개 button}}
/volume1/web/dokuwiki/data/attic/wiki/css.1665478931.txt.gz · 마지막으로 수정됨: 2022/10/11 18:02 저자 dhan

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki