목록프로그래밍/HTML, CSS (4)

희락코딩

CSS 개념정리 / 플렉스 (정렬) flex!

플렉스 (FLIX) html의 구도를 좀 더 수월하게 해결 해주는 친구!!! 바로 플렉스 입니다. 이친구의 기본 옵션은 정렬입니다.이번 블로깅은 플렉스가 어떤식으로 적용 되는지 이미지를 통해 정말 가볍게 알아보도록 하겠습니다. flex 플렉스는 부모요소 안에 있는 자식들을 수평으로 정렬시켜주는 속성입니다. 플렉스로 나뉜 Flex items 와 Flex Contanier에 다양한 CSS 속성을 부여 할 수 있습니다. Flex Contanier display, flex-flow , flex-direction, flex-wrap justify-content, align-content, align-items Flex items order, flex, flex-grow, flex-shrink, flex-basis..
프로그래밍/HTML, CSS 2021. 4. 28. 00:29
CSS 개념정리 / 박스모델

박스모델 CSS는 Html을 꾸며주는 친구 입니다! 쉽게 말해 html은 연예인 css는 스타일 리스트로 생각하면 편합니다. 이번 블로깅은 css의 기본개념인 박스모델의 속성에 대해 알아보겠습니다! 공부할 목차!!!! 1. width, height 2. 표현단위 3. margin 4. padding 5. border 6. box-sizing 7. overflow 8. display 9. opacity 1, width, height ▶ 요소의 가로/세로를 나타냅니다. auto 값을 주면 브라우저가 자동적으로 너비를 계산합니다. px, em, vw 등 단위로 지정합니다. ▶ 박스모델을 이해하려면 인라인 요소와 블록요소에 대한 개념이 잡혀 있어야 됩니다!!! 인라인 요소는 컨텐츠의 크기만큼 자동으로 줄어드려는..
프로그래밍/HTML, CSS 2021. 4. 21. 23:44
HTML 자주 쓰는 태그 정리

HTML 태그 정리 HTML에서 자주 쓰는 태그 위주로 정리했습니다! 코드펜에서 직접 실습을 하면서 어떻게 출력되는지 확인하면서 익혀보도록 합시다!!! https://codepen.io/pen/ Create a New Pen ... codepen.io 코드펜과 함께 실습해보기!!! 1. div (블럭요소) 내용 // 특별한 의미가 없는 구분을 위한 요소 2. span (인라인요소) 내용 // 특별한 의미가 없는 구분을 위한 요소 ▶ div태그와 span 태그의 차이점을 css를 통해 쉽게 이해하자!! // CSS // 코드펜에서 사용하기 div { background-color : red; width : height : } span { background-color : blue; width : heigh..
프로그래밍/HTML, CSS 2021. 4. 13. 00:44
HTML 기본 개념 정리

HTML HTML 은 Hyper Text Markup Language 약어로 웹 브라우저를 통해 사용자에게 보이는 웹 문서를 작성하기 위한 언어 입니다. 다시 말해 보여지는 브라우저의 구조를 설계하며 웹 페이지를 위한 마크업 언어입니다. 1. HTML 기본 문법 1.1 태그(TAG) ▶ 열린 태그와 닫힌 태그 안에 요소를 담습니다. 내용 //이를 묶어 하나의 요소라 합니다. 열린태그 요소내용 닫힌태그 1.2 부모와 자식관계 ▶ 부모태그는 자식태그를 감싸줍니다. // 일반적인 부자 관계 태그 내용 부모태그 자식태그 // 상위태그와 하위태그 (조상태그와 후손태그) 내용 빨간색태그 기준으로 아래로 갈 수록 자식요소와 후손요소를 만납니다. (하위요소) 초록색태그 기준으로 올라 갈 수록 부모요소와 조상요소를 만납..
프로그래밍/HTML, CSS 2021. 4. 13. 00:30
Prev 1 Next