비전공자를 위한 HTML/CSS

hyper text = 링크markup language = 프로그래밍 언어 중 한 종류태그, 내용, 요소<,h1,>속성 이름, 속성 값id="title" or id='title'두 가지 이상의 속성이 들어갈 수도 있다.id="title" class="test"어느

하나만 선택할 때

file은 파일 첨부할 수 있는 input이고...submit이랑 reset은 form 태그 안에서 동작한다.submit은 제출, reset은 초기화로 이름이 되어있다(아무것도 안 적었을 때)value라는 속성으로 이름을 변경할 수 있다.button은 그냥 button

selected라는 속성이 있음textarea여러 줄을 사용자에게 입력받고자 할 때 사용됨buttontype에 submit, reset, button이 있다.

label웹 접근성 향상에 도움이 되므로 필수적으로 선언해야한다.연결해주고자하는 form 요소의 id값과 해당 label 요소의 for 속성 값을 동일하게 적어주어야한다.요소의 이름 부분, label을 클릭하면 해당 폼 요소를 클릭한 것처럼 동작을 한다.fieldset

HTML 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있다. 이런 규칙들을 그룹화시켜놓은 것이 콘텐츠 모델이다.Metadata콘텐츠의 style(표현), script(동작)를 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소base, lin

시멘틱 마크업 컴퓨터(브라우저)가 잘 이해할 수 있는 코드 애초에 프로그래밍 언어는 사람과 기계 사이 정해진 약속 같은 것 의미에 맞는 요소를 사용 문서의 구조화 인간과 기계가 모두 이해할 수 있는 것이 목표

출처독립적으로 구분해 배포하거나 재사용할 수 있는 구획"시멘틱 요소 article"은 HTML5에서 도입된 요소 중 하나로, 웹 페이지에서 컨텐츠 영역 안에 있는 독립적인 글이나 기사를 나타내는 데 사용됩니다. 이 요소는 웹 페이지의 의미론적 구조를 개선하여 검색 엔진

block level 요소: 한 줄에 하나의 요소 표시일반적인 모든 요소 포함, div, h1~h6, p, ul, li, table 등inline level 요소: 한 줄에 여러 개의 요소 표시block레벨의 자식 요소, span, i, img, em, strong 등

cascading style sheetsHTML(마크업 언어)을 꾸며주는 언어html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할CSS는 항상 HTML과 묶여서 이야기된다.

선택자(selector) => h1color: yellow; => 속성(property) 이름과 속성 값(value)이렇게 두 개를 묶어서 하나의 선언(declaration)이라고 한다.중괄호를 포함한 부분 전체를 선언부(declaration block)선택자(sele

선택자의 부분에 태그의 이름이 들어가게 된다.그룹화가 가능하다.전체 선택자별표를 애스터리스크(asterisk)라고도 부른다고 한다.성능에 좋지 않으므로 사용을 가급적 지양하고 있다고 한다.HTML은 보라색으로, CSS에는 밑줄을 하려면 어떻게 해야할까?class 선택자

html 안에 head랑 bodybody 안에 div, span, pbody 안의 div 안에 h1, spanbody 안의 div 안의 h1 안의 span부모와 자식, 조상과 자손, 형제, 인접한 형제 요소공백으로 구분을 해주면 된다.'>'를 넣으면 된다.\+를 써주면

지금 문서 내에 존재하지 않는 요소에 스타일을 부여할 수도 있고특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용시킬 수도 있는 선택자이다.미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스브라우저 스스로가 특정한 상황이 되면 자동적으로

서로 다른 선택자를 이용해서 같은 요소를 선택하는 경우 그런 동일한 규칙들이 서로 상반된 스타일을 가지고 있다면 어떻게 표현될까? 선택자에는 어떤 규칙이 우선되어야하는지에 대해 정해진 룰이 있다. 그것이 바로 구체성이다. 구체성 : 선택자를 얼마나 명시적으로 선언했

어떤 스타일이 특정 요소뿐만 아니라 그 자손 요소에까지 적용되는 방식em요소가 부모 color: gray 값을 상속받아서 회색으로 표현된다.margin, padding, background, border 등의 박스 모델 속성들은 상속되지 않는다.상속된 선언의 구체성자식

모든 스타일 규칙들이, 다시 말하면 CSS가 어떤 방식으로 문서에 적용이 되는지를 정한 규칙 지금까지 배운 구체성도 캐스케이딩 규칙의 하나다. 구체성이 같은 두 가지 규칙이 동일한 요소에 적용이 된다면

w3schools.com

실무자들이 가장 많이 참고하는 사이트 두 곳w3schools여러 가지 언어의 커리큘럼을 제공하고 있다.그 중에서 learn CSS로 들어가보자.learn CSS다양한 속성이 존재하는데 하나하나 확인해볼 수도 있고 맨 밑의 CSS Reference라는 메뉴에서 키워드별로

절대 길이px - pixels (1px = 1/96th of 1in)1px은 화면의 한 개의 점과 같다.픽셀은 상대 단위이지만 화면에서 고정된 크기 값을 가지고 있기 때문에 절대 길이라고 이해하면 된다.픽셀은 웹 개발을 할 때 여러 환경에서도 디자인을 동일하게 표현하고

컬러의 경우 다양한 형태로 컬러 값을 적용할 수 있다.hexa 뜻접두사적으로 쓰이는 6이라는 뜻의 그리스어.decimal 뜻십진법(十進法, 문화어: 열올림법)은 10을 기수로 한 기수법이다. 자리수로 0, 1, 2, 3, 4, 5, 6, 7, 8, 9를 쓴다.hexad

축약형

contents와 border 사이 여백이 paddingborder 바깥쪽의 여백은 margin만약 다른 box가 있다면 box와 box 사이의 여백을 margin이 지정해줄 수 있다.

border요소의 테두리border: border-width border-style border-color|initial|inherit;

padding안쪽 여백padding: length|initial|inherit;

margin요소의 바깥 여백margin: length|auto|initial|inherit;margin: auto;를 써서 가로축 정렬을 할 때는 width를 필요로한다.두 div에 대해 margin: 50px auto;를 했을 때 margin collapse가 발생한

%를 단위로 쓸 때 가로축을 기준으로 한다.그래서 top과 bottom에 %를 넣었을 때도 가로축을 기준으로 적용이 된다.margin은 요소 간 여백을 설정할 때 쓰인다.따라서 음수로 선언할 수도 있다.음수 값이면 당겨짐.padding은 음수값을 쓸 수 없기 때문에 음

width: auto|value|initial|inherit;contents에 width: 300px이 적용됨자식 요소의 퍼센트 값은 부모 요소의 contents 영역에 영향을 받는다.

height요소의 높이 값을 결정width와 마찬가지로 기본값이 auto이다.height: auto|length|initial|inherit;height: 100px;은 contents에 적용되는 것%defines the hieght in percent of the c