본문 바로가기

코딩 공부206

[HTML] input type="submit"과 button input type="submit"과 button 폼 전송 기능을 하는 과 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. 하지만 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그이다. 따라서 button은 하위 태그를 추가할 수 있다. button의 경우 버튼 클릭 하시오 input의 경우 input { background-image: url(addr) } 위와 같은 차이가 나기 때문에 좀더 디자인 측면에서 자유도가 높다. 2022. 9. 19.
[HTML] section과 article section HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용 (하나의 문서가 여러개의 을 가질 수 있음) 사용방법 각각의 section을 식별할 수단이 필요하다. 주로 제목( ~ ) 요소를 section의 자식으로 포함하는 방법을 사용 요소의 컨텐츠를 따로 구분해야 할 필요가 있으면 article 요소를 고려 section 요소를 일반 컨테이너로 사용하면 안 된다. 특히 단순히 스타일링이 목적이라면 div 요소를 사용하는 것이 좋다. 대게 문서 요약에 해당 구획이 논리적으로 나타나야 하면 section 이 좋은 선택이다. article 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄 사용방법 각각의 a.. 2022. 9. 17.
[CSS] 전환과 변환 전환 요소의 전환 효과를 지정하는 속성 (transition) ▶ 속성 목록 4가지 1. transition-property : 전환 효과가 일어난 CSS속성 이름 명시 transition-property: value; value all : transition 효과 적용 가능한 속성에 전부 적용 width, height, background-color 등이 있음(ex. background-color 3s, width 5s ) 2. transition-duration : 전환 효과가 일어날 시간 명시 transition-duration: value; value 0s : 시간이 없다. 시간 : 소수점 작성 시, 0 생략 가능 (0.5 → .5) 3. transition-timing-function : 타이밍.. 2022. 9. 16.
[CSS] 배경과 배치 배경 1. 요소의 배경 색상 (background-color) background-color: red; color처럼 rgb 등 여러 가지 방법이 있습니다. 2. 배경 이미지 삽입 (background-image) background-image: url("경로"); 경로 지정을 해줘야 한다. 요소의 크기가 이미지의 크기보다 크면 반복 출력 (바둑판식 배열) 3. 배경 이미지 반복 제어 (background-repeat) background-repeat: no-repeat; value no-repeat : 반복 없음 repeat : 수평, 수직 반복 repeat-x : 수평 반복 repeat-y : 수직 반복 4. 배경 이미지 위치 (background-position) background-position.. 2022. 9. 15.
[CSS] 요소의 투명도, 글꼴과 문자 요소의 투명도(opacity) 요소의 투명도를 지정합니다. opacity: value; Value 1: 불투명 0~1: 까지 소수점 숫자 입력 예시(CSS/출력) div { width: 200px; height: 100px; border: 2px dashed teal; background-color: steelblue; margin: 20px; } .a { opacity: 0; } .b { opacity: 0.5; } .c { opacity: 1; } .d { opacity: 0.8; } 글꼴 1. 기울기 (font-style) font-style: italic; 값 : normal (기울기 없음), italic(기울어진 글자) 2. 두께 (font-weight) font-weight: bold; 값 :.. 2022. 9. 15.
[CSS] display와 float, Felx display 요소가 화면에 어떻게 보여질지 특성을 지정합니다. .container { display: ; } Value 1. none : 보여지지 않는다. 요소는 존재하지만 화면에서는 사라진다. 2. inline : 글자요소 3. block : 상자 (레이아웃) 요소 4. inline-blokc : 글자 + 상자 요소 5. flex box : 1차원 레이아웃(x축, y축) 6. grid : 2차원 (x축, y축) 행과 열을 동시에 사용 float 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성 float: value; value inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. rig.. 2022. 9. 15.

티스토리툴바