힘차게, 열심히 공대생

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다. body 태그안에서 나누어진다고 보면 됩니다. HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. HTML 문서의 탐색 링크를 정의함. HTML 문서에서 섹션(section) 부분을 정의함. HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함. HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. 1. header HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지..

부트스트랩 말고 또 다른 무료 CSS 프레임워크인 벌마!! 머임마!! 부트스트랩과 사용법도 비슷하고 제공하는 기능도 비슷합니다. 어쩔수 없이 CSS 프레임워크이기 때문이죠 Bulma 가 부트스트랩보다 좋은 점은 제 개인적인 생각으로 조금 더 직관적인 CSS 문법을 사용해서 커스터마이징 하기 쉽다 입니다. Bulma 사용법 1. bulma css link ```html ``` 2. 원하는 CSS를 가져온다! https://bulma.io/documentation/elements/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox ..

사용자(client)의 요청에 따라 서버(Server)에서 응답을 해 HTM:을 처리하여 전송하는 웹페이지를 동적 웹페이지라 합니다. 동적 웹페이지의 종류로는 CSR 과 SSR이 존재합니다. 1.CSR(Client-side rendering) 어려울 것 없이 클라이언트 단에서 서버에 데이터를 보낸 후 클라이언트 쪽에서 HTML을 완성하는 방법을 의미합니다. 주로 Ajax가 이에 포함됩니다. 2. SSR (Server-side rendering) 서버 쪽에서 템플릿 HTML에 데이터를 삽입해 HTML 코드를 완성하는 방법입니다. 템플릿 언어가 이에 해당 합니다.

1. 구글 폰트를 검색해 들어간 다음 마음에 드는 폰트를 선택한다 https://fonts.google.com/?subset=korean#standard-styles Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 마음에 드는 폰트를 클릭하고, 쭉쭉 스크롤을 내리면 글짜 크기별로 폰트를 선택할 수 있다. 3. select style로 적용할 폰트를 선택할 수 있다. 내가 선택한 모든 폰트를 한번에 적용이 가능하다 4. link를 head 안에 복사해서 구글폰트를 사용할 수 있고 5. css 를 html style 태그 안에 삽입해서 사용한다. ex 뾰로롱

21단계 - 세로상 여분 공간 간격 조절 align-content : 세로선 상에 여분의 공간이 있는경우 flex 컨테이너 사이의 간격을 조절합니다. flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다. flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다. center: 여러 줄들을 세로선 상의 가운데에 정렬합니다. space-between: 여러 줄들 사이에 동일한 간격을 둡니다. space-around: 여러 줄들 주위에 동일한 간격을 둡니다. stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다. 22단계 23단계 24단계 - flex 요소 정리 justify-content : flex 요소 가로선 상 정리 align-items : flex 요소 세로선 상 정리 flex-dir..

14단계 - 아이템 요소 개개인 순서 지정 order : flex 요소의 순서를 지정 order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다. 15 단계 - order 음수 16단계 align-self : 지정된 "align-items"값을 무시하고 flex요소를 세로선 상에서 정렬합니다. 17단계 18단계 flex-wrap : flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다. nowrap: 모든 요소들을 한 줄에 정렬합니다. wrap: 요소들을 여러 줄에 걸쳐 정렬합니다. wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다. 19단계 flex-direction : 정렬한 방향을 지정합니다. 20단계 flex-flow : flex-direction 과 flex-wrap ..

8단계 - 정렬 방향 지정 flex-direction : 정렬할 방향을 지정합니다. row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다. 9단계 - 요소를 세로 방향으로 10단계 column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다. 11단계 12단계 13단계

1단계 - 오른쪽 정렬 justify-content : flex요소들을 가로선 상에서 정렬 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. (default) flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 2단계 - 가운데 정렬 3단계 - flex 주위 간격 설정 4단계 - 요소 간격 5단계 - 세로 정렬 align-items : flex 요소를 세로선 상에서 정렬 flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center:..

CSS display는 이름 그대로 어떻게 보이느냐이다. css 요소가 사용자에게 어떻게 보여질지 설정할 수 있다. inline / block none flex 1. inline to block / block to inline (디스플레이) display를 이용하여 인라인 요소를 블락으로, 그 반대로도 제어할 수 있다. ex) .div{ display : inline; } .span{ display : block; } 2. none None은 말 그대로 요소를 보이지 않게 하는 것이다. 보이지만 않을 뿐 위치는 차지한다. diplay : none; 3. Flex flex는 각 요소들을 비율로 위치를 나누는 기법입니다. flex를 사용하기 위해서는 먼저 부모 클래스의 display를 flex로 설정해 줍니..

1. Padding과 Margin 각 아이템 요소들의 크기를 결정해주는 옵션은 패딩과, 마진 2가지가 있다. 패딩과 마진의 차이점은 Padding : 내 덩치를 키운다. (아이템요소 내부 크기) Margin : 다른 사람과의 거리를 둔다. (아이템 외부 크기) 라고 나는 외운다. Padding, Margin 크기 정해주기(순서) 패딩과 마진 둘다 크기를 정해줄 때 4면 (위 아래, 왼쪽, 오른쪽)을 각각 다르게 줄 수 있다. 작성 방법 item { padding : 1px 5px 8px 12px; /*위,오른쪽, 아래, 왼쪽*/ } 2. 포지션 (Position) css 포지션은 크게 3가지 (relative, absolute, fixed)가 있다. 3가지 포지션의 차이점은 1. relative (반응형..