css12 [CSS] Float (레이아웃 구성) 플롯(float, 매우 중요) 웹 페이지 레이아웃을 구성할 때 반드시 사용하는 속성이다. 키워드 left right none 플롯을 사용할 때 주의해야 할 점이 있다. 부모의 높이 값이 지정 안 되는 현상이 일어나는 것이다. 부모 요소에 1. 가상 요소:after { content: ""; display: block; clear: both;} 2. overflow: hidden 중 택 1을 적용해주면 된다. 기존 div 하나에 div 4개 박스를 넣고 border 값을 줘보았다. 자식 박스를 float left 했더니 이렇게 이상하게 돼있다. 지금이야 border를 적용시켜 눈으로 확인이 쉽지만 나중에 오류가 나면 찾기 힘들다. 첫 번째 방법을 적용하여 부모 박스에 .box:after {content: .. 2022. 9. 26. [CSS] 패딩과 마진 (padding, margin 속성을 통한 레이아웃 구성) 패딩과 마진(매우 중요) border 기준으로 안쪽 여백은 padding 바깥 여백은 margin이다. 개발자 도구로 마우스를 올렸을 때 초록과 주황으로 구분할 수 있다. F12로 접속 후 Element에서 영역 포인터 아이콘 선택 혹은 Ctrl + Shift + C로 개발자 도구의 마우스 포인터를 사용할 수 있다. 스타일 시트에서 p 태그에 패딩을 넣어보겠다. p { border: 1px solid #777; width: 300px; height: 100px; padding: 10px; /* 전부 */ padding: 10px 20px; /* 위아래, 좌우 */ padding: 10px 20px 30px 40px; /* 12시부터 시계방향 */ } padding right, left 등을 사용하여 하나.. 2022. 9. 26. [HTML, CSS] display 속성 (메뉴 만들기) display 속성 (중요) display 속성은 태그 영역 표현 방식을 지정하는 속성이다. none - 태그를 화면에서 보이지 않게 한다. block - 태그를 block 형식으로 지정 inline - 태그를 inline 형식으로 지정 우리는 html에서 블록과 인라인 속성에 대해 배웠다. HTML 기초지식(태그, 블럭과 인라인, ul, li, 하이퍼링크, table form 예제) 방학 중 특강을 들으며 내가 배운 것을 블로그에 정리해보겠다. 이 글은 간단하게 핵심적인 html, css 기초 문법을 보고 이해하는데 도움이 될 것이다. 교재 : html5 웹 프로그래밍 입문 (3판) 웹이란? anhanryang.tistory.com CSS에서는 HTML에서 선언한 인라인 요소도 블록 형식으로 바꿔줄 수.. 2022. 9. 26. [CSS] position-fixed (메뉴, 사이드 바 스크롤 시 고정) position-fixed 우리가 사용하는 웹페이지 화면을 보면 오른쪽 하단이나 메뉴 등이 고정돼있는 경우를 많이 봤을 것이다. 예를 들면 밑의 사진처럼 웹에서 블로그 글을 작성할 때 상단 도구 바, 웹에서 쇼핑을 할 때 양측 사이드 광고 블록 등 마우스 스크롤을 해도 화면 내용만 바뀔 뿐 고정된 콘텐츠들이 있다. 이것을 바로 position의 fixed 속성을 사용하여 고정해주는 것이다. z-index 위에 설명한 absolute 3색 예제를 보면 파란색이 빨간색, 노란색 둘 다 덮어 위에 표시되는 것을 알 수 있다. 포지션은 z 축을 사용하는 것이다. 그러므로 z-index 속성을 사용하여 우선순위 등을 정해주어야 하는 경우가 있다. 1번 빨간 동그라미로 콘텐츠의 높이를 스크롤로 확인해야 할 만큼 준.. 2022. 9. 21. [CSS] float를 활용한 쇼핑몰 물건 판매 예제 float을 활용한 물건 판매 예제 div 큰 블럭 한 개 하위 width 부모 영역의 50%씩 두 개 블럭 생성 왼쪽은 사진 영역, 오른쪽 영역은 내용 영역. 오른쪽 내용 영역은 다시 세 개의 블럭으로 나눠 정보와 버튼 등을 기입한다. 다양한 박스를 어떻게 선언하고 배치시키는지 이해하는 것이 중요하다. 마치 안드로이드 스튜디오를 할 때 다중 linear layout을 수직(vertical), 수평(horizon) 배치하는 것과 비슷하다. 태그의 열고 닫힘과 들여쓰기 정도를 잘 확인하며 하도록 한다. 아래 코드를 확인하여 위 그림의 1, 2, 3, 4, 5가 어떤 클래스와 아이디에 매치되는지 이해한다. 과제2 제목 : 돌고래 급처분 합니다 내용 : 안녕하세요, 돌고래입니다. 저는 새로운 주인을 찾고있어요.. 2022. 9. 19. [CSS] Overflow 오버플로우 ( 내용이 넘칠 때 ) 오버플로우 텍스트 컨트롤 중 글자가 길어질 때 사용할 수 있다. visible로 설정을 했다. 위처럼 작성하지 않아도 기본 설정은 visible로 돼있다. 글자가 넘쳐도 박스를 뚫고 계속 나오는 것을 확인할 수 있다. hidden 설정으로 넘치는 글자를 안 보이게 할 수 있다. scroll 속성으로 스크롤을 위아래로 내려 확인할 수 있게 한다. auto 속성은 텍스트가 적으면 표시하고 많으면 스크롤을 자동으로 붙여준다. 2022. 9. 5. [CSS] border & text 속성 ( + 글자 가운데 정렬 방법 ) border border 속성은 테이블 윤곽 설정이다. 보통 3가지 속성을 한 번에 지정해서 사용한다. ex) 1px solid #777 두께 1픽셀, 줄 종류 한 줄, 색상 rgb값 텍스트 속성은 바로 밑에서 설명한다. html에서 p 속성 3개 블록을 만듦. 스타일에서 p 태그 속성에 모두 테이블 윤곽과 색상을 회색으로 정해준다. #rgb값은 대표적인 색깔을 영어로 입력해도 인식한다. border-radius = 테두리가 둥글어짐 p {border: 1px solid #777; border-radius: 8px;} 둥글어진 테두리의 모습 text 속성 color 텍스트 색 지정 line-height 줄 사이의 간격 지정 letter-spacing 글씨 사이의 간격 text-align 수평에서 글자 정.. 2022. 9. 5. [HTML] 폰트 (폰트 적용, 글씨 크기, 정렬) 폰트 font 관련 속성 한 번에 설정하기 font-xxx = font 내부 단일 속성 xxx 설정하기 ex) font-size, font-weight 먼저 사용하고 싶은 폰트를 검색한다. 네이버, 구글 등이 폰트를 제공한다. 구글 웹폰트 검색 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 마음에 드는 폰트 선택 후 화면이다. 화면 큰 글씨 Styles 우측에(현재 가려져 있음) + select 버튼을 선택하면 사진 우측 하단에 link, import 형식으로 폰트를 가져다 쓸 수 있는 코드를 제공한다. 그리고 CSS 룰 또한.. 2022. 8. 4. [CSS] 스타일 시트와 선택자 (속성과 값 적용 방법, 가상 선택자) 스타일은 3가지 방식으로 적용할 수 있다. 1. 내부 스타일 시트 2. 외부 스타일 시트 3. 인라인 스타일 첫 번째로 간단하게 사용하는 방식인 내부 스타일 시트이다. 스타일 태그 내부에 모든 스타일을 적용시키며 이 스타일 태그는 외부 스타일 시트 내부 스타일 시트 인라인 시트 실행결과 2022. 7. 31. 이전 1 2 다음
