코딩 슬라임 공방

Display와 visibility의 차이점 display:none;은 요소 자체가 사라지게된다. 그래서 요소가 레이아웃에 영향을 미치지 않게 된다.(none이 되면 요소가 사라지고 그 자리를 다른 요소들이 차지함) 하지만 visibility: hidden은 렌더링은 하지않지만 요소가 사라진게 아니라 레이아웃에 영향을 미치게 된다.(hidden이 되어도 그자리는 그대로 차지함) opacity로 안보이게 조절하는 것과는 다르게 요소가 클릭조차 되지 않게된다. 클래스 생성과 제거 -제이쿼리 $('선택자').addClass('클래스선택자') - 클래스 생성 $('선택자').removeClass('클래스선택자') - 클래스 제거 event 버블링 이란? 이벤트가 연속하여 발생하는 버블 현상을 의미한다. stop..

See the Pen JjYZweO by Lee Hoyeon (@nixpluvia) on CodePen.

Form 태그 Form 태그는 웹 페이지에서 입력양식을 의미합니다. 텍스트 필드나 체크박스나 라디오 버튼에 입력된 정보를 백엔드 서버에 보낼 때 사용합니다. 자세한 내용은 백엔드 공부를 진행 할 때에 하는게 좋습니다. fieldset,legend fieldset,legend는 form요소를 구조화 하기 위해 필요한 태그입니다. fieldset : 여러개의 폼 요소를 그룹화 하여 구조적으로 만들기 위해 사용합니다. legend : 폼 요소의 제목으로 fieldset 내부에 작성합니다. fieldset은 보통 form의 성격에 따라 구분합니다. legend는 fieldset의 자식으로 무조건 최상단에 위치합니다. Input 태그 실제로 사용자가 양식을 입력하기 위한 태그는 Input과 같은 태그들이 사용됩니..

float 속성을 사용해서 레이아웃을 작성할 때, 부모가 float 속성을 가진 자식의 크기를 반영하지 못하는 문제가 생깁니다. 그래서 문서의 흐름에서 벗어나서 혼자서 둥둥 떠다니는 경우가 생깁니다. 그 원인은 float 속성을 가진 요소와 다른 요소들이 서로 다른 층에 떠있게 되어서 발생하는 현상입니다. 레이아웃 문제 해결 방법 해결 방법에는 여러가지 방법이 존재합니다. See the Pen abvVMMj by Lee Hoyeon (@nixpluvia) on CodePen. 부모 요소에 float 속성을 부여 float 속성을 가지고 있는 요소를 감싸고 있는 부모에게 float 속성을 부여하여 해결 할 수 있습니다. 하지만 이 방법은 다른 모든 레이아웃들도 float 속성으로 모두 정리해주지 않으면 다..

Flex 속성의 존재 이유 보통의 상황에서 요소(Elements)들의 구조를 만들 때에 수직적인 구조는 만들기가 쉬운 반면에 보통 수평구조를 만드는 속성이 명확하지 않기 때문에 float,inline-block를 사용해서 수평구조를 만들었지만 이러한 방법들은 해결은 가능하지만 여러가지 문제를 가지고 있습니다. (Clear,White-space 등) 하지만 이런 방법들은 차선책일 뿐입니다. 그래서 수평과 수직구조를 편하게 만들기위해서 flex속성을 사용합니다. Flex의 개념 Flex는 Container와 item으로 구성되어 있습니다. 수평,수직구조를 정렬하기 위해서는 정렬되는 item을 담을 수 있는 Container가 필요합니다. 다만, Container와 item에 적용하는 속성이 구분되어 있습니다..

Float Float 속성의 용도 float의 단어는 원래 '뜨다'라는 의미를 가지고 있다. float속성은 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가 에대한 속성입니다. 하지만 요즘에는 레이아웃을 구성하는대에도 많이 사용하고 있습니다. Float 의 속성값 none : 요소를 부유시키지 않습니다. 기본값 입니다. left : 요소를 왼쪽으로 부유시킵니다. right : 요소를 오른쪽으로 부유시킵니다. initial : 기본값으로 설정합니다. inherit : 부모요소로 부터 상속 받습니다. left와 right를 사용해서 부유속성을 지정하면 display의 값은 무시됩니다. 다만 none의 속성값일때는 제외합니다. Clear Clear 속성의 용도 float 속성을 통해 부유..

CSS 코드 Normalize 노말라이즈 (전체에 주는 코드) Custom 커스텀 (객체에 주는 코드) --------------------------------------- 숫자로 되어있는 이미지 쉽게 넣는 방법 ex) 01~10번까지 이미지가 있다고 할 때에 숫자를 매겨야하는 부분에 $$를 사용하고 *10을 하 img [src="http://bnx.oa.gg/img/bnx_16fw_visual_$$_list.jpg"] * 10 순서대로 01~n번까지 숫자가 차례로 매겨진다. margin 은 border 바깥의 공백이다. padding 은 border 내부의 공백이다. margin과 padding은 margin-top / padding-top과 같이 속성이 적용 될 방향을 지칭할 수 있다 margin ..

코드 수업 BNX웹페이지 만들기 ----------------------------------------------------------------------------------------------------------------------- 타이틀 만들기 BNX TITLE은 혼자 라인을 사용하기 때문에 display: block; 화면 중앙에 배치하기 위해서 text-align: center; 을 사용해야한다. text-align을 사용하기 위해서 타이틀을 tag로 감싼다. (text-align은 text에게만 적용된다.) font-size, font-weight를 사용해서 크기를 조절한다. ------------------------------------------------------------..