컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

HTML 문서 내에 목록을 만들 때 목록 앞에 오는 불릿을 CSS로 바꿔줄 수 있다. 'list-style-type'을 속성으로 주고 다양한 속성값을 줘서 불릿 모양을 바꿀 수 있다. 리스트 { list-style-type: 속성값; } 국어 수학 영어 국어 수학 영어 속성 값을 다양하게 줘서 불릿을 바꿀 수 있다. 속성 값을 다음과 같다. 속성 값 설명 예시 decimal 1로 시작하는 십진수 1, 2, 3, 4, 5 ...... 10, 11 decimal-leading-zero 앞에 0이 붙는 십진수 01, 02, 03, 04, 05 ..... 09, 10, 11 lower-roman 소문자 로마 숫자 ⅰ, ⅱ, ⅲ ... ⅹ upper-roman 대문자 로마 숫자 Ⅰ, Ⅱ, Ⅲ ..... Ⅸ, Ⅹ ..

텍스트에 적용할 수 있는 스타일은 굉장히 다양하다. This is HTML, CSS

문서를 쓰다보면 하나의 요소에 여러 개의 스타일이 적용될 수 있고 그로 인해 충돌한다. 이 경우 CSS 적용 우선 순위에 따라 정해진다. 1순위. 인라인 스타일 p 태그입니다. id나 class로 스타일을 적용해도 태그에 직접 'style' 속성값을 주는 인라인 스타일이 가장 먼저 적용된다. 2순위. id 스타일, class 스타일 안녕하세요! 한 태그에 id값과 class 값이 동시에 부여되고 적용될 경우 id의 스타일을 우선 적용한다. 위 예시 같은 경우는 최종적으로 글자 색상이 'red'가 아니라 'blue'가 적용된다. 3순위. 태그 스타일 p 태그입니다. 위와 같이 일반적으로 태그를 선택자로 지정해서 스타일링 하는 경우 id와 class에 밀린다. 최 후순위로 스타일이 적용된다.

1. 선택자란? 기존 HTML 스타일링은 HTML 문서 내에서 이뤄졌고 태그 내에 일일히 스타일링을 적용해야했다. 하지만 CSS가 등장하면서 태그에 대한 접근법이 달라졌다. CSS 문서를 외부에 만들거나 div 태그입니다. div 태그입니다 - 1 div 태그입니다 - 2 div 태그입니다 - 3 클래스 선택자 스타일 적용하려는 태그에 class 값을 준 뒤 해당 클래스 값을 선택자로 지정할 수 있다. 해당 클래스 값을 선택자로 지정할 땐 앞에 점 ( . )을 찍어줘야 한다. 클래스는 동일한 값을 여러 태그에 적용할 수 있다. 그래서 성격 등이 비슷한 태그는 하나의 클래스로 묶어서 스타일 적용이 가능하다. .class 명 { 속성 : 속성값 } 안녕하세요! id 선택자 스타일을 적용하려는 태그에 id값을..

CSS는 안녕하세요! 태그 안에 태그를 쓰고 스타일링을 해줄 수 있지만 명시성이 떨어진다. 3. 'style'을 속성 값으로 주는 경우 안녕하세요! 스타일링을 원하는 태그 안에 'style'의 속성 값을 준 뒤 그 안에서 해당 태그를 꾸며주면 된다. 4. HTML과는 다른 별도의 Style 전용 문서를 만드는 경우 태그를 따로 써서 css를 분리하더라도 css가 너무 길어질 경우가 있다. 그럴 경우에는 css 전용 문서를 만들어서 불러오는 방법도 있다. CSS 전용 문서는 아래와 같이 별도의 형식이 없이 식별자, 속성, 속성값만 주면 된다. p{ font-size: 50px; color: red; } 그 뒤엔 아래와 같은 형식으로 CSS를 쓴 스타일 시트를 안녕하세요!

CSS란? 'Cascading Style Sheet'의 약자로 HTML 문서를 꾸며주는 역할을 한다. CSS는 HTML의 문서를 꾸며주는 역할을 한다. CSS를 통해 HTML 문서의 색상이나 크기를 바꿀 수 있고 다양한 효과를 적용할 수 있다. CSS 등장 이유 과거에 CSS가 있기 전까지는 HTML 안에서 내용쓰고 꾸며주고 전부 했다. 하지만 그로 인해 HTML 문서가 복잡해졌고, 이에 본문과 스타일링의 분리가 필요했다. 그래서 등장한 것이 CSS다. CSS는 HTML 문서의 스타일링을 맡아서 하는 언어로서 HTML과 분리해 사용한다. 하지만 분리되어서도 HTML을 조종해 스타일링을 할 수 있다. 결국 CSS의 등장으로 HTML은 본래의 목적대로 사용할 수 있게 되었다. CSS의 사용 태그 안에 있는 ..

옵션 선택하기 기존 폼 요소들은 을 이용해 한 줄짜리 폼만 이용했다. 그러나 태그를 사용하면 다양한 항목 중에 옵션을 선택하는 폼 요소를 생성할 수 있다. ,, 태그 안에서 태그를 쓰면 다양한 요소를 선택할 수 있는 옵션을 사용할 수 있다. 그리고 은 로 묶어서 그룹을 만들어줄 수 있다. 학과 선택 건축공학과 기계공학과 컴퓨터공학과 사학과 어문학부 철학 이외에도 옵션으로 선택 가능한 태그가 있다. 태그를 이용하면 태그의 텍스트가 들어갈 항목에 옵션으로 대신 넣을 수 있는 텍스트를 지정할 수 있다. 학과 선택 건축공학과 기계공학과 컴퓨터공학과 사학과 어문학부 철학 태그를 이용하면 여러 줄 입력하는 텍스트 영역을 만들 수 있다. 태그 내에 cols와 row를 이용해서 텍스트 영역의 가로 너비와 세로 줄 단위..

태그 - 사용자의 입력값을 받는 태그 태그는 사용자의 입력을 받는 아주 중요한 태그다. 를 이용하면 로그인, 이메일 외에 체크박스 등으로 고객 입력 자료를 다양한 경로로 입력 받을 수 있다. 태그들의 type속성 태그들을 잘 써주려면 type속성을 잘 지정해주어야 한다. 태그들의 다양한 속성 태그는 모양뿐 아니라 다양한 속성을 가졌다. 그 외엔 다음 속성을 가졌다. 속성 설명 formaction 실행할 프로그램을 연결. 'type'가 'submit' 또는 'image'일 때만 사용 가능. formenctype 서버로 폼을 전송했을 때 폼 데이터를 어떤 식으로 해석할 것인지 지정. 'type'가 'submit' 또는 'image'일 때만 사용 가능. formmethod 서버로 폼을 저장하는 방식(get, ..