본문 바로가기
728x90
반응형

Programming/HTML & CSS12

[HTML] <button>사용하기 태그 안에서 을 사용할때 type정의가 되어있지 않으면 자동으로 submit 동작을 하게된다. 스크립트 동작으로 사용하고 싶을경우엔 이라고 정의해주면 된다. 2021. 1. 7.
[HTML] input태그 readonly 와 disabled 속성 비교 readonly와 disabled는 모두 사용자의 직접 입력을 막는 속성이다. -readonly 사용법 -disabled 사용법 하지만 form안에서 사용 할 경우 두 속성은 아주 큰 차이가 있다. readonly - form 전송 가능, disabled - form 전송시 값 전달 불가능. 2021. 1. 4.
[CSS] 선택자 선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다. 선택자의 종류 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함. 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용. 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용. 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용. 복합 선택자 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택. 자식선택자 section > ul { text-shadow: none;.. 2020. 12. 28.
[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.. 2020. 12. 26.
[CSS] 크리스마스 트리 만들기 수정 며칠전에 css 공부하다 만든 크리스마스 트리.. 캡쳐해놓고 보면 그럴싸하지만.. 창 크기를 조절하면 지멋대로.. 기존 작성한 코드 ○ ★ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 기존 코드에서 container의 width를 지정해주지 않아서 발생한 문제였다. width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!! .container { display: flex; flex-wrap: wrap; text-align: center; width: 900px; } 2020. 12. 26.
[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.. 2020. 12. 26.
[HTML] form 이해하기 form태그 속성 action : form이 전송되는 서버 (url 또는 html 링크) name : form의 이름 (서버로 보내질 때 이름의 값으로 데이터 전송) accept-charset : 문자 인코딩 지정 target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정 method : 전송 방법 설정 (get, post) form 내부의 태그와 속성 type : 입력 형식 name : 서버로 전송되는 데이터 이름 : text 입력란 : password 입력란 (입력 내용이 안보임) : 버튼 : form에 입력한 데이터를 서버로 보내주는 버튼 : form에 입력한 모든 데이터 삭제 : 단일선택 : 다중선택 : file 업로드 : 눈에 보이지 않는 정보를 서버쪽으로 보낼 때 사 여러.. 2020. 12. 24.
[CSS] inline, block, inline-block display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 dispaly: inline; 텍스트처럼 dispaly: block; 상자처럼 inline 요소들 , , , - 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감. block 요소들 , - width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감. inline-block속성은 위 두가지의 특징을 모두 가짐, inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능. .box1 { display: inline-block; width: 300px; } .box2 { display: inline-b.. 2020. 12. 24.
[CSS] flex사용 배치 연습 Flex란 레이아웃 배치 전용 기능. Flex 레이아웃을 만들기 위한 기본적인 HTML구조 helloflex abc helloflex dispaly: flex; 한줄로 아래와 같이 배치. .container { dispaly: flex; } flex-wrap 줄넘김 처리 연습 연습하다가 만든 트리.. 2020. 12. 24.
728x90
반응형