- HTML / CSS 메모

HTML은 구조를 표현하기 위한 언어

ul -> ol 로 바꾸면 앞에가 숫자로 바뀜

 

 

---

password에는 자동으로 가려진 글씨가 나옴

input type="checkbox"            : 다중선택가능

input type=''radio"                    : 그룹설정가능(name으로 그룹화 해주어야 함), 하나만 선택 

 

 

text area : 줄바꿈이 가능 /text area

button : 버튼

 

 

• id : 고유한 이름을 붙일 때
• class : 반복되는 영역을 유형별로 분류할 때

 

셀렉터 사용

 

반복되는 항목은 class로 지정한다. 같은 class로 지정함으로서 동일한 유형임을 알 수 있다.
ul#comment : 읽기 영역 자체는 고유하므로 id 로 지정한다

-> 만약 id(#)로 지정하게 된다면? id를 전체를 통틀어서 유일하게 설정. 중복을 할 수 있게 class로 설정

ul 자체는 id 로 지정하기 가능 

 

 

---

<input id="id-input" class="input focus" type="text" placeholder="ID" />
<input
  id="password-input"
  class="input focus"
  type="password"
  placeholder="password"
/>
<button id="login-button">Login</button>
<label> <input id="keep-checkbox" type="checkbox" />Keep Login </label>

<link rel="stylesheet" href="style.css" />

---

-3, 4번이 HTML 태그

-HTML attribute name : class

HTML 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값) 으로 구성됩니다. 위 예제에서 속성의 이름은 class입니다. attribute value(속성의 값)과 분명히 구분되어야 합니다.

 

 

---

 

• 문단하나를 먹기 위해서 <p>
• 사진을 크기에 맞게 삽입하기 
  background-size: cover
  background-position: center
  
  
• margin은 바깥 여백을, padding은 내 안쪽 여백을
• 사진 둥글게 border-radius: px
• * : 모든 태그에 먹이겠다!
• 스타일 분리 = css 로 따로 만들 수 있음
  <!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
  <link rel="stylesheet" type="text/css" href = "(css파일이름).css">