HTML&CSS&JavaScript(16)
-
[jQuery] toggle()
Show it
2021.11.29 -
[JS] form데이터 접근
input태그에 입력된 데이터 가져오기 입력된 데이터 접근하기 입력: 확인 사용자가 입력한 폼 데이터에 접근하기 위해서는 폼 안에 있는 필드의 id나 name속성을 이용해야 한다. id속성을 이용하려면 getElementById()를 사용해 요소를 찾으면 된다. 반면, name속성을 이용하려면 form 객체에서 name을 찾으면 된다. form객체는 배열이고 각 배열 요소는 form["name속성값"]과 같이 name속성으로 접근할 수 있다.
2021.11.25 -
[CSS] float 속성 / z-index
float float 속성은 요소의 위치를 잡을때, 아주 중요한 역할을 하는 스타일 속성이다. float속성을 사용 하지 않고 이미지와 텍스트를 단순히 배치 하게 되면 어떻게 표시 되는지 보자. 이미지는 인라인 요소이고, 단락은 블록 요소여서 아래와 같이 배치 된다. 그럼 이번에는, float: left 이용 하여 보자. 일반적으로는 어떤 요소든지 float 속성을 적용할 수 있다. float속성으로는 요소를 컨테이너의 왼쪽이나 오른쪽으로만 배치될 수 있다. 위쪽이나 아래쪽으로 float 할 수는 없다. z-index 이어 볼 내용은 z-index z-index속성은 요소의 스택 순서(즉, 요소가 다른 요소의 앞에 위치하느냐, 뒤에 위치하느냐)를 지정한다. 아래 코드와 함께 결과값을 보면 이해하기 쉬울거..
2021.10.14 -
[CSS] 요소 위치 정하기
HTML으로 문서를 작성하고, 해당 문서의 위치 및 스타일은 CSS로 작성한다. 그렇다면, 요소의 크기는 무엇으로 결정하는가? width, height 속성으로 요소의 너비와 높이를 설정한다. 기준 위치는 무엇으로 결정하는가? 바로 position 속성으로 결정한다. CSS의 position 속성은 요소의 위치를 설정 방법을 나타낸다. 즉 '절대적인 위치' 설정이냐 아니면 '상대적인 위치' 설정이냐를 나타낸다. 즉, position속성을 설정하지 않으면, ( top, bottom, left, right) 속성을 아무리 설정해도 소용이 없다. CSS에는 기본적으로 4가지의 위치 설정 방법이 존재한다. 1️⃣ 정적 위치 설정(static positioning): 정상적인 흐름에 따른 배치 2️⃣. 상대 위치..
2021.10.12 -
[CSS] 블록요소 & 인라인 요소
블록(block)요소: 화면의 한 줄을 전부 차지한다. 인라인(inline)요소: 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다. ✅ 블록요소 블록요소는 브라우저의 한 줄을 모두 차지한다. 예를 들면, , , , , , , , , , 요소가 블록 요소이다. 즉 한 줄에 하나씩 배치된다. ✅ 인라인요소 인라인요소는 정상적으로는 한 줄 안에 차례대로 배치된다. 예를 들면, , , , , , , 요소가 인라인 요소이다.
2021.10.11 -
[HTML] <div> , <span>
태그는 "divide"의 약자로서, 논리적인 섹션으로 분리하는데 사용 되는 태그이다. 또한 는 블록 수준 요소이기 때문에 하나의 줄을 전부 차지한다. 요소는 인라인 요소로서 텍스트를 위한 컨테이너로 사용할 수 있다. 위 HTML를 실행하면 위와 같은 화면이 나온다. 정리하자면, 와 은 요소를 모아서 하나의 묶음으로 만든 후에 특정한 스타일이나 위치, 크기 등을 적용하는 경우에 많이 사용된다.
2021.10.04