[HTML] <button>사용하기

태그 안에서 을 사용할때 type정의가 되어있지 않으면 자동으로 submit 동작을 하게된다. 스크립트 동작으로 사용하고 싶을경우엔 이라고 정의해주면 된다.

• format_list_bulleted programming/html & css
• · 2021. 1. 7.
• textsms

[HTML] input태그 readonly 와 disabled 속성 비교

readonly와 disabled는 모두 사용자의 직접 입력을 막는 속성이다. -readonly 사용법 -disabled 사용법 하지만 form안에서 사용 할 경우 두 속성은 아주 큰 차이가 있다. readonly - form 전송 가능, disabled - form 전송시 값 전달 불가능.

• format_list_bulleted programming/html & css
• · 2021. 1. 4.
• textsms

[CSS] 선택자

선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다. 선택자의 종류 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함. 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용. 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용. 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용. 복합 선택자 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택. 자식선택자 section > ul { text-shadow: none;..

• format_list_bulleted programming/html & css
• · 2020. 12. 28.
• textsms

[CSS] Flex

1 2 3 div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간. div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것. flex container에 display: flex를 적용하는게 시작. 아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로) 그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷) flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성 row; (기본값) 가로 방향으로 배치 column; 역순으로 가로 배치 row-reverse; 세로 방향으로 배치 column-reverse; 역순으로 세로 배치 flex-wr..

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[CSS] 크리스마스 트리 만들기 수정

며칠전에 css 공부하다 만든 크리스마스 트리.. 캡쳐해놓고 보면 그럴싸하지만.. 창 크기를 조절하면 지멋대로.. 기존 작성한 코드 ○ ★ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 기존 코드에서 container의 width를 지정해주지 않아서 발생한 문제였다. width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!! .container { display: flex; flex-wrap: wrap; text-align: center; width: 900px; }

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[CSS] grid

grid는 flex보다 더 복잡적인 레이아웃 표현이 가능 -flex는 한방향 레이아웃 -grid는 두방향 레이아웃 grid 레이아웃을 만들기 위한 기본적인 HTML구조 A B C D E F G H I grid 설정하기 .container { display: grid; } 행배치 : grid-template-rows 열배치 : grid-template-columns 예) grid-template-columns: 200px 200px 500px; column을 200px, 200px, 500px로 만들겠다는 의미. grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; ※ fr(fraction)은 숫자 비율대로 트랙의 크기를 나눔. 1..

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms