[CSS] Grid

[CSS] Grid

https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “studiomeal.com  giFlex는 한 방향 레이아웃 시스템 (1차원)Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 1. grid-template-rows, grid-template-colums 그리드 형태 정의gird-template-colums : 200px 200px 500pxcolumn을 200px, 200px, 500px로 지정gird-template-colums : 1fr 1fr 1fr;fr..

  • format_list_bulleted HTML,CSS
  • · 2023. 2. 24.
[CSS] Flex

[CSS] Flex

https://studiomeal.com/archives/197 정리글 입니다. 이번에야말로 CSS Flex를 익혀보자이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누studiomeal.com  Flex 컨테이너에 적용하는 속성 display : flex; Flex 아이템들은 가로 방향으로 배치되고, 내용물의 width 만큼 차지한다.(inline 요소와 동일)height는 컨테이너의 높이만큼 늘어난다.inline-flex는 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값. inline-blick처럼 동작한다.   메인축(Main Axis) : 아..

  • format_list_bulleted HTML,CSS
  • · 2023. 2. 24.

inline, block, inline-block

inline : display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.,, 등 padding-left, right 같이 양 옆으로 값이 실행된다.padding-top, bottom에 값을 주기 위해서는3display:inline-block;이나 display:block;을 주어 인라인요소를 블록화해야 한다. block : 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. inline-block : inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding속성의 상하 간격 지정이 가능하다. bl..

  • format_list_bulleted HTML,CSS
  • · 2023. 2. 14.
Shadow

Shadow

Shadow{h-shadow v-shadow blur-radius spread-distance color}{수평그림자 수직그림자 흐림반경 확산거리 색상}  black shadow effect cloudy shadow effect neon effect color shadow effect black shadow effect

  • format_list_bulleted HTML,CSS
  • · 2023. 2. 7.
border-collapse,separate

border-collapse,separate

border-collapse: 테이블이나 셀의 테두리선을 겹쳐서 표현#table { text-align: center; width: 100%; height: 150px; border-collapse: collapse; margin: auto; border-color: #f0f0f0; line-height: 30px;} border-seprate: 테이블이나 셀의 테두리선을 분리해서 표현#table { text-align: center; width: 100%; height: 150px; border-collapse: separate; margin: auto; border-color: #f0f0f0; line-height: 30px;}

  • format_list_bulleted HTML,CSS
  • · 2023. 2. 6.

form태그

폼 태그 속성action:폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.name : 폼을 식별하기 위한 이름을 지정합니다.accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET or POST)   GET과 POST방식의 차이전송할 http 메소드 종류인 GET과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행한다.GETPOST데이터가 외부에 노출되어 보안에 취약개인정보나 보안을 해야하는 경우 사용리소스에서 데이터를 요청하는 경우인 읽을 때 사용지정된 리소스에서 데이터를 처리할 경우인..

  • format_list_bulleted HTML,CSS
  • · 2023. 2. 3.