본문 바로가기

Study/HTML & CSS

 (10)
[CSS] 스타일 속성 - float 속성 1. float 속성 float 속성은 부유하는 대상을 만들 때 사용하는 스타일 속성입니다. 키워드 설명 left 태그를 왼쪽에 붙입니다 right 태그를 오른쪽에 붙입니다 This is cat This is cat float 속성을 사용하면 그림을 글자 위에 띄울 수 있습니다. 원래 float 속성은 이러한 목적으로 만들어졌지만 현대에는 웹 페이지의 레이아웃을 만들 때 더 많이 사용합니다. [1] (221) 2. float 속성을 사용한 수평 정렬 1) float: left 1 2 2) float: right 1 2 3. float 속성을 사용한 레이아웃 구성 1) 레이아웃 구성 2) 기본 HTML 코드 3) body 내용 입력 Header Navigation Aside This is aside Sec..
[CSS] 스타일 속성 - 위치 속성 1. 절대 위치 좌표 / 상대 위치 좌표 절대 위치 좌표 : 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정합니다. 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정합니다. 일반적으로 절대 위치 좌표는 특정 크기의 영역을 지정한 태그 내부에서만 사용합니다. 2. position 속성 HTML 태그의 위치 설정 방법을 변경할 때는 position 속성을 사용합니다. 키워드 설명 static 태그가 위에서 아래로 순서대로 배치됩니다 relative 초기 위치 상태에서 상하좌우로 위치를 이동합니다 absolute 절대 위치 좌표를 설정합니다 fixed 화면을 기준으로 절대 위치 좌표를 설정합니다 3. z-index 속성 z-index 속성에는 숫자를 적용하며 숫자가 클수록 앞에 위치합니다..
[CSS] 스타일 속성 - 박스 속성 1. 박스 속성 width 속성과 height 속성은 글자를 감싸는 영역의 크기를 지정하는 스타일 속성입니다. 전체 너비 = width + 2 x (margin + border + padding) 전체 높이 = height + 2 x (margin + border + padding) 2. width, height 3. margin, padding margin: [margin] margin: [margin-top] [margin-right] [margin-bottom] [margin-left] margin-top: [margin-top] margin-right: [margin-right] margin-bottom: [margin-bottom] margin-left: [margin-left] 4. Borde..
[CSS] 스타일 속성 - 가시 속성 가시 속성은 태그가 화면에 보이는 방식을 지정하는 속성입니다. [1] (167) 1. display 속성 Dummy 1 Dummy 2 Dummy 3 1) display none Dummy 1 Dummy 2 Dummy 3 2) display block Dummy 1 Dummy 2 Dummy 3 3) display inline Dummy 1 Dummy 2 Dummy 3 4) display inline-block inline 키워드를 적용한 코드는 width 속성과 height 속성이 적용되지 않고 margin 속성이 div 태그의 좌우로만 지정됩니다. inline-block 키워드를 적용하면 width 속성과 height 속성을 적용할 수 있고 margin 속성이 상하좌우로 적용됩니다. Dummy 1 Dum..
[CSS] 스타일 속성 - 단위 1. 크기 단위 단위 설명 % 백분율 단위 em 배수 단위 (1em=100%, 1.5em=150%, ...) px 픽셀 Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 2. 색상 단위 단위 형태 설명 red, orange, blue, green, brown, purple, ... #000000 HEX 코드 단위 rgb(red, green, blue) RGB 색상 단위 rgba(red, green, blue, alpha) RGBA 색상 단위 hsl(hue, saturation, lightness) HSL 색상 단위 hsla(hue, saturation, lightness, alpha) HSLA 색상 단위 (alpha : 0.0을 입력할 경우 완전히 투명한 상태를 나타내..
[CSS] 선택자 (Selector) 1. CSS 선택자 CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다. 선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있습니다. [1] (103) 2. 전체 선택자 HTML 문서 안에 있는 모든 태그를 선택할 때는 전체 선택자를 사용합니다. [1] (107) - 모든 글자의 색상이 빨간색으로 변경 3. 태그 선택자 - 모든 a 태그의 색상이 검은색으로 변경 - 모든 h1, h2 태그의 색상이 파란색으로 변경 4. 아이디 선택자 1) 앞에 #을 붙이면 아이디 선택자 2) 아이디는 클래스와 달리 화면에 단 한 개만 존재하는, 유일한 대상을 지칭할 때 활용 Area 1 Area 2 5. 클래스 선택자 1) class1 앞에 . 을 ..
[HTML] 입력 양식 태그 1. from 태그 2. 기본 input 태크 2) input 태그의 type 속성값 HTML4 에서 지원 속성값 설명 button 버튼 생성 checkbox 체크박스 생성 file 파일 입력 양식 생성 hidden 보이지 않습니다 image 이미지 형태 생성 password 비밀번호 입력 양식 생성 radio 라디어 버튼 새성 reset 초기화 버튼 생성 submit 제출 버튼 생성 text 글라 입력 양식 생성 HTML5 에서 추가 지원 속성값 설명 color 색상 선택 양식 생성 date 일 선택 양식 생성 datetime 날짜 선택 양식 생성 datetime-local 지역 날짜 선택 양식 생성 email 이메일 입력 양식 생성 month 월 선택 양식 생성 number 숫자 생성 양식 생성 ra..
[HTML] CodePen 1. CodePen 회원가입없이 HTML/CSS/JavaScript 코드가 어떻게 출력되는지 간단히 테스트 할 수 있는 사이트가 있습니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 2. CodePen 에서 HTML/CSS/JavaScript 코드 테스트 1) Start Coding 클릭 2) HTML/CSS/JS 영역에 코드 입력하면 출력 영역에서 바로 결과 확인 가능
[CSS] 복합 선택자 1. 복합 선택자 HTML Code Sample 1) 모든 태그 선택 img { ... } 모두 선택 2) 아래 모든 태그 선택 p img { ... } 만 선택 2. 복합 선택자의 문제점 복합 선택자는 유용하지만 문제점도 있습니다. 복합 선택자로 작성된 코드를 읽으면서 수정하려면 HTML 본문의 구조를 완전히 파악하고 있어야 한다는 점입니다. 혼자서 홈페이지를 만들 때는 별다른 문제가 되지 않을 수도 있겠습니다만, 회사에서 협업을 하는 등의 상황에서는 이것이 불편을 초래할 수도 있습니다. 여러분은 CSS 쪽에서 복합 선택자를 적극적으로 활용하기보다는 HTML 코드상에서 클래스를 적극적으로 활용하는 편이 좋습니다. 클래스 선택자를 활용할 때는 해당 클래스의 이름을 한눈에 파악할 수 있으며, 해당 클래스 ..
[CSS] Basic 1. CSS 란 CSS라는 이름은 'Cascading Style Sheet'의 줄임말입니다. 영단어 cascade는 폭포라는 뜻입니다. 무언가가 위에서부터 아래로 콸콸 쏟아져 내리는 모습을 생각하면 되겠습니다. 캐스케이딩이라는 이름에서부터 우리는 한 가지 정보를 유추할 수 있게 되었습니다. '무언가가 위에서부터 아래로 쏟아져 내리는 것을 의미하는구나!' CSS에서 말하는 캐스케이딩은 스타일이 쏟아져 내리는 것을 의미합니다. [2] (172) 항상 위에서 아래로만 쏟아져 내리는 폭포와 같이 CSS 코드가 우선순위에 따라 적용되므로, 이를 캐스케이딩이라 부릅니다. [2] (175) 2. CSS 문법 (선택자) { (스타일 속성 1): (스타일 값); (스타일 속성 2): (스타일 값); ... } 3. 7...

티스토리툴바