디지털노마드/HTML과 CSS 강좌 (7) 썸네일형 리스트형 CSS Flexbox 정복 하기 레이아웃 용 그리드와, 컴포넌트 용 플랙스 박스그리드와 플랙스 박스의 차이점CSS Grid는 다차원 레이아웃 모듈로, 열과 행이 있습니다. Flexbox는 자식 항목을 열 또는 행으로 배치 할 수 있지만 둘 다 배치 할 수는 없습니다. 웹페이지에서 내용을 배열할 때 CSS 그리드와 flexbox중 어떤것이 더 좋다고 할 수는 없습니다. 다만, 때에따라 적절히 섞어서 사용하기도 하고 하나로 만들기도 합니다. 예를 들어, 아래와 같은 플랙스 박스를 만들어 봅시다. 실행해 보면 아레와 같은 모양으로 정렬된 박스들을 확인 할 수 있습니다. 그래서 보통은 네비게이션 메뉴바를 만들때 사용합니다. 웹브라우저 창크기에 따라 변하는 Responsive Flexbox아래와 같이 미디어 태그를 사용하면 모바일, 타블렛, 데.. CSS - 텍스트 꾸미기와 정렬하기 HTML은 웹 문서의 뼈대를 CSS 는 웹 문서를 예쁘게 꾸며주는 역할을 합니다. 텍스트 정렬하기 - text-align 아래와 같이 head 태그안에 text-align 태그를 넣습니다. 가운데, 왼쪽, 오른쪽, 양끝 맞추기 정렬, 자동 맞추기등을 쉽게 할 수 있습니다. text-align: center; text-align: left; right; text-align: justify; text-align:initial; DOCTYPE html> 텍스트 정렬하기 가운데 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum v.. CSS Syntax - CSS 쓰는 방법 CSS Syntax 쓰는 방법 CSS 규칙 세트는 선택기와 선언 블록으로 구성됩니다. 선택기는 스타일을 지정할 HTML 요소를 가리 킵니다. 선언 블록에는 세미콜론으로 구분 된 하나 이상의 선언이 포함됩니다. 각 선언에는 CSS 속성 이름과 값이 콜론으로 구분되어 포함됩니다. 여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶습니다. Hello World! These paragraphs are styled with CSS. 위와 같이 html 의 head태그안에 선언해줍니다.하지만,웹 페이지를 예쁘게 꾸미기 위해서 사용하는 태그의 길이는 상당히 길어지기 때문에 따로 파일을 분리해서 만든 후 html에서 호출해주는 형식으로 사용합니다. 아래 그림과 같이 styles.css 파일을 따로 저장한.. CSS - 박스 테두리 모양 둥글게 만들기 border-radius를 사용하면 박스의 테두리를 둥글게 만들 수 있습니다. 다음과 같이 태그를 만들어 봅시다. 오른쪽은 HTML파일이고 왼쪽은 CSS 파일 입니다. CSS 파일은 styles 폴더안에 style.css로 저장합니다.그리고 HTML파일에서 링크를 걸어줍니다. HTML파일에서는 상자의 클래스를 class="box"로 적어줍니다. .box { width:200px; height:200px; background-color: rgb(226, 43, 104); border-radius: 20px; } .box2 { margin-top: 20px; width:200px; height:200px; background-color: rgb(177, 226, 43); border-radius: 0 20p.. CSS로 전체 배경색 바꾸기 웹문서의 배경색을 바꾸는 태그는 간단하지만 효과가 좋기 때문에 예쁘게 웹 문서를 꾸미고 싶어하시는 분들은 자주 사용하는 태그 입니다. 아래의 태그를 스타일시트에 적용해봅시다. 스타일 시트를 HTML 에 포함 시키지 않으려면 OO.css 파일로 만들어 저장합니다. 그리고, 적용시키고자 하는 파일에서 링크를 적어 부릅니다. 웹문서에 배경색 적용하기 body { background-color: yellowgreen; } 배경색에 그라디언트 적용하기 색상을 지정할때는 컬러의 이름을 써주거나 (yellow, red, green) rgb 코드를 적어줍니다. 색상코드는 웹사이트에서 쉽게 구할 수 있습니다. body { background-image: linear-gradient(rgb(89, 208, 255), rg.. CSS 배우기 - CSS 기본설정하기 HTML 과 CSS 배우기 2일차 입니다. 오늘은 중요한 몇가지 HTML 과 CSS 기초를 시작하겠습니다. HTML 로 웹문서의 기초를 만들고 CSS 스타일을 만들어 주어서 웹 문서를 꾸며줍니다. CSS는 웹 문서의 스타일을 쉽고 빠르게, 예쁘게 정리 정돈해주는 역할을 합니다. 뿐만 아니라 웹 문서와는 따로 파일을 만들어 연결해서 사용할 수 있기 때문에 정리하기가 편리하고, 간단한 애니메이션도 구사할 수 있기 때문에 자바스크립트를 많이 쓰지 않고도 다양한 효과를 웹페이지에 부여해 줄 수 있습니다. 간단한 예를 들어보겠습니다. 다음은 웹문서의 배경색을 바꾸어 주는 태그입니다. 아래에서 웹 컬러코드(Hexadecimal Color Values)차트 링크를 볼 수 있습니다. 원하시는 색깔의 색상 코드를 이용해.. HTML 과 CSS 배우기 - 1일차 HTML 기초 태그 모든 웹 문서를 시작할때 알아야하는 html 의 기초중의 기초를 알아봅시다. 1일차만 알아도 웹 페이지를 만들 수 있습니다. 다음은 웹 문서를 작성할때 가장 먼저 기초적으로 적어줄 태그 입니다. 웹문서를 디자인할때 예쁘게 정리해주려면 필수적으로 CSS도 익혀야 합니다. 처음에는 HTML 부터 적교 그 다음 CSS로 스타일을 지정해주는 것입니다. 오늘은 먼저, CSS를 적용하기 전에 HTML 기초부터 적어보겠습니다. ---> 도큐멘트 선언 ---> 웹문서 HTML 시작 ---> 머릿말 닫기 ---> 본격적인 문서의 시작 ( 웹 문서를 만드는 데 필요한 모든 태그를 담는다.) ---> 웹문서 HTML 닫기 텍스트 스타일 지정 하기 다음은 텍스트 스타일을 지정해 봅시다. 글자의 크기, 스타.. 이전 1 다음
