하와이 가는 여정

HTML 소스코드 전체 : SKT : KT : LGU+ : 위와 같은 input태그에 checkbox 타입을 가지고 있는 코드가 있다고 하자. 전체 체크박스를 선택했을 때 다른 체크박스들이 비활성 되는 상황을 만들려고 한다. $(document).ready(function(){ $("#totall3").click(function(){ if(this.checked){ $(".moblieRest").prop("disabled",true); } else{ $(".moblieRest").prop("disabled",false); } }); }); 전체 체크박스 id를 jquery를 이용해 선택되었을 때 나머지 체크박스는 class로 접근해 비활성화 시켜준다.

Flexbox에 이어 이번 포스팅에는 Grid라는 레이아웃 시스템이 대해 알아보자. Grid를 단어 그대로 해석하면 격자 혹은 눈금을 뜻한다. Flexbox가 줄에 대한 정렬이었다면 Grid는 격자, 즉 행렬을 통해 요소들을 좀 더 정교하고 복잡하게 정렬 및 배치 할 수 있는 레이아웃 시스템이다. Grid 요소들의 명칭 Grid Lines. Grid를 이루는 행과 열의 선들을 모두 Grid Lines라고 한다. 행과 열은 각각 Grid column과 Gird row라고 말한다. Grid Track. 평행한 Grid Line 두 줄 사이의 공간을 Grid Track 이라고 부른다. Grid Area. 네 개의 Grid Line으로 둘러싸였고, 그 안이 더 이상 쪼개지지 않는 한 칸을 Grid Cell 이라..

flex containe의 프로퍼티를 배웠다면 이제 flex item 차례이다. flex item의 프로퍼티는 display: flex 가 적용된 부모 요소의 자식 요소에만 사용할 수 있다. flex-grow flex-grow는 이름 그대로 flex item의 확장과 관련이 있다. 단위 없는 숫자 값(비율)을 사용하며 기본값은 0이다. 값이 0일 경우 flex container가 커져도 flex item의 크기는 커지지 않고 원래 크기를 유지한다. 하지만 값이 1 이상일 경우 flex item의 원래 크기와 상관없이 flex container를 채우기 위해 flex item도 커지게 된다. 1 0 1 1 1 1 2 1 .container { background-color: skyblue; height: ..

align-content는 flex items 들이 여러 줄일 경우 flex-direction 방향으 기준으로 수직 정렬 방법을 결정한다. stretch, flex-start, center, flex-end 기본값은 stretch이다. flex-direction: row (가로 방향) align-content: flex-start 1 2 3 4 5 6 align-content: center 1 2 3 4 5 6 align-content: flex-end 1 2 3 4 5 6 flex-direction: column (세로 방향) align-content: flex-start 1 2 3 4 5 6 align-content: center 1 2 3 4 5 6 align-content: flex-end 1 2..

align-items는 저번 포스팅에서 다룬 justify-content와 달리 item을 flex-direction에서 정해진 방향의 수직방향으로 정렬한다. stretch align-items는 기본값으로 stretch를 갖는데, 이는 별다른 크기가 지정되지 않았을 때 flex 아이템을 늘려서 맞춰준다. 1 2 3 .item { border: pink 4px solid; background-color: #fff; text-align: center; } .container { background-color: skyblue; height: 200px; display: flex; } .item에 따로 높이를 지정해 주지 않았지만 자동으로 부모 요소의 크기만큼 늘어나 있다. .align-items의 기본값인 ..

이번에는 정렬과 관련된 프로퍼티 순서이다. 가장 먼저 살펴볼 프로퍼티는 justify-content이다. justify-content는 flex-direction으로 정해진 방향에 flex item들을 어떻게 정렬할 것인지 정한다. flex-start, center, flex-end flex-direction: row (가로 방향) justify-content: flex-start 1 2 3 justify-content: center 1 2 3 justify-content: flex-end 1 2 3 flex-direction: column (세로 방향) justify-content: flex-start 1 2 3 justify-content: center 1 2 3 justify-content: fle..

이번 시간에는 부모 요소인 flex container에서 사용 가능한 프로퍼티 중 방향과 흐름을 정의하는 프로퍼티에 대해 알아보자. flex-direction flex-direction으로 flex container 안에서 flex item이 배치될 기본 방향을 정할 수 있다. 이 프로퍼티로 따로 지정하지 않으면 row라는 값으로 기본 설정되며 item은 왼쪽에서 오른쪽으로 정렬한다. 아래와 같이 flex container에 dispaly: flex를 작성하면 flex-direction의 기본값인 row로 가로 정렬되는 것을 확인할 수 있다. .container { background-color: skyblue; padding: 16px; display: flex;/* flex container에 해당하..

flexbox는 크기가 불분명한 요소들에 대해 효율적으로 동작하고, 특별한 계산 없이 쉽게 정렬할 수 있다. flexbox는 아래와 같이 부모 요소인 flex container와 자식 flex item으로 구성되어있다. flexbox를 사용하려면 정렬하고자 하는 요소의 부모 요소인 flex container에 display: flex; 를 추가하면 된다. display: flex; 를 사용하지 않으면 flex를 사용할 수 없다. display: flex; .parent { /* 배치, 정렬하고자 하는 요소를 감싸는 부모 요소 */ display: flex; } .child { /* 배치, 정렬하고자 하는 대상 요소 */ ... } flexbox는 기본적으로 가로 혹은 세로로 정해둔 방향을 기준으로 프로퍼..

float는 뜨다, 띄우다는 뜻을 가지고 있으며, float 프로퍼티는 말 그대로 요소를 어떻게 띄울지 결정한다. float 프로퍼티는 요소를 디자인 흐름에서 벗어나게 한 뒤, 사용자가 지정한 방향에 배치하도록 하는 프로퍼티이다. 문서 작성 프로그램에서 위와 같이 사진과 본문 사이의 배치를 조정하여 사진과 글이 함께 보여지도록 문서를 작성한 경험이 있을 것이다. 웹에서도 이와 동일하게 배치할 수 있다. float를 사용함으로... 처음 실습은 float를 적용하지 않고 실습해보겠다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy..

position은 이름 그대로 요소를 배치하느 방법을 정하는 프로퍼티로, 네 가지 값을 주로 사용한다. position: static 보통의 요소의 position 값은 static이 기본이다. static에서는 좌표 프로퍼티를 사용할 수 없다. top, right, bottom, left 말이다. position: relative relative는 상대 위치이다. 기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동한다. position: static position: relative .static { position: static; background: pink; left: 16px; top: 16px; } .relative { position: relative; background: skybl..