html, css/css-display속성들 정리
-
[css] display: grid - 05. track-list 에 대해서html, css/css-display속성들 정리 2020. 8. 2. 16:09
[css] grid 로 리스트 배열하기. 1. 리스트들의 부모 Element 를 Grid Container로 만든다. 2. 몇 행 몇 열을 만들건지 정의 합니다. 가. grid-template-columns /rows 를 사용한다. 가-1. grid-template-columns 속성 값은 Track-list 인데 Track-list에 대해서 알아야 사용 할 수 있습니다. (이게 맞는 표현인지는 모르겠습니다. 혹시 표현이 잘 못 되었다면 정정 코멘트 부탁 드립니다.) 지난 포스팅에 이어서 Track-list에 대해서 마무리를 하겠습니다. w3g.org 사이트의 설명을 이해하기에는 어려운것 같아서 css-tricks.com 여기 사이트의 내용을 정리를 해보려고 합니다. css-tricks.com 에서 아래..
-
display: grid - 04. Grid Tracks / Cells /track-list 용어 정리, grid-template-columns /rows 사용법에 대해서html, css/css-display속성들 정리 2020. 7. 18. 11:12
지난 포스팅에 이어서 css display:Grid로 리스트 배열 하는 법에 대해서 포스팅을 하겠습니다. 1. 리스트들의 부모 Element 를 Grid Container로 만든다. 2. 몇 행 몇 열을 만들건지 정의 합니다. 몇 행 몇 열을 만들려면 grid-template-columns 와 grid-template-rows 속성을 사용 해야 됩니다. grid-template-columns 와 grid-template-rows 를 사용 해보겠습니다. https://www.w3.org/TR/css-grid-1/#grid-track-concept 에서 사용법을 확인 하면 아래의 이미지처럼 나오는데 빨간 박스 영역들의 용어들이 생소해서 이 부분들 부터 포스팅을 하려고 합니다. 먼저 trak-list 가 나오..
-
[css] display: grid - 03. grid로 리스트 배열 하기( Grid Container)html, css/css-display속성들 정리 2020. 7. 4. 10:12
이제 Grid 속성에 대해서 어느정도 알았으니 Grid드를 사용하여 리스트 들을 배열을 해보는 포스팅을 해 보겠습니다. 먼저 MDN 과 w3schools 에서 설명하는 내용을 종합하여 정리를 하였습니다. 리스트를 Grid를 사용하여 배열 하기 위해서는 다음의 순서로 진행 합니다. 1. 리스트들의 부모 Element 를 Grid Container로 만든다. 먼저 리스트를 배열 하려면 리스트를 감싸고 있는 부모 Element에 display: gird를 적용하여 부모 요소를 Grid Container로 만듭니다. Grid Container는 grid 레이아웃을 사용 할때 display:grid를 적용하는 대상을 부르는 명칭으로 이해 하면 될 것 같은데요, 왜 이름이 Grid Container라고 물어보면 저..
-
[css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서html, css/css-display속성들 정리 2020. 5. 11. 22:34
01. display:grid에 대해서 (grid 소개) display: grid 라는 속성이 있습니다. (※ subgrid를 검색 해서 오신분은 본문 내용 하단 04번 내용을 바로 보시길 바랍니다.) display: grid를 처음 접하는 사람들에게 쉽게 이해를 할 수 있게 좀더 직관 적으로 설명을 해보면 grid는 다음과 같은 장점들이 있습니다. 1) grid를 사용 하면 아래의 형태의 레이아웃을 고민 안하고 쉽게 만들 수 있습니다. 2) 리스트 아이템 끼리 사이의 간격을 간단히 줄 수 있습니다. 보충설명을 하면 일반적으로 위에 이미지처럼 간격이 있는 카드 리스트 형태의 레이아웃을 코딩을 하기 위해서는 아래의 css 처럼 작성해야 합니다. float 속성을 사용한 css / grid 속성을 사용한 c..
-
display : flex 에대해서 - 2.flex-grow, flex-basishtml, css/css-display속성들 정리 2019. 4. 9. 13:29
지난 포스팅에는 ul에 display: flex를 적용 시켰을 때의 결과를 확인 하였습니다. 요번에는 display: flex를 적용시킨 태그(플렉스 컨테이너) 의 자식 태그(플렉스 아이템)들도 flex관련 속성을 적용 시킬 수 있는데 flex-grow, flex-shrink, flex-basis를 적용 시켰을때의 결과를 확인 하겠습니다. 현재 예제코드에서의 ul의 width는 560px 입니다. 먼저 li 에 flex-basis : 180px를 적용 시키겠습니다. 위에 이미지를 보면 li에 width가 180px로 적용된 것을 확인 하였는대요, flex-basis에대 대한 설명은 조금 미루고 이상태에서 flex-grow : 1을 더 추가 적용 해보겠습니다. flex-grow:1을 적용하였더니, li에 ..
-
display : flex 에대해서 - 1.flex-wraphtml, css/css-display속성들 정리 2019. 3. 9. 19:13
flex : 1 을 검색 해서 오신 부은 아래 링크의 글을 보시기 바랍니다. https://sh-sida.tistory.com/66?category=672722 display : flex 에대해서 - 2.flex-grow, flex-basis 지난 포스팅에는 ul에 display: flex를 적용 시켰을 때의 결과를 확인 하였습니다. 요번에는 display: flex를 적용시킨 태그(플렉스 컨테이너) 의 자식 태그(플렉스 아이템)들도 flex관련 속성을 적용 시 sh-sida.tistory.com display 속성중에 flex 는 익스플로러는 10부터 적용이 가능하며 최근 최신 브라우저만 대응 하는 프로젝트에서는 사용 할 수가 있습니다. flex는 관련 속성들이 많아서 천천히 하나씩 포스팅 할 계획입니..
-
개발자와 기획자가 꼭 알면 좋은 css - 3 display : inlinehtml, css/css-display속성들 정리 2018. 7. 23. 02:22
display: inline이 조금 내용이 많을 수 있는대요, 일단 대는대로 포스팅을 하겠습니다. (저도 어디까지 포스팅을 할지를 몰라서요;;;) 다음과 같이 background 색만 적용 시킨 2개의 sapan 태그가 있습니다. 초록 상자를 보시면 width와 height 가 240.7 , 21.6 이라고 나왔는대요, span 태그에 width: 220px; height: 200px; margin-top: 10px 을 적용 시켜 보겠습니다. 그러면 길이가 다른 2개의 span 태그의 width는 220px이고 height 는200px에 위에 간격이 10px 벌어진 span 태그의 모습이 예상이 될 겁니다. 띠로리~~~ 하지만 예상한것과는 달리 녹색 박스와 빨간 박스를 보시면 알겠지만 분명 css는 들어..