1) display:inline-block으로 블록을 인라인으로 바꾸거나 2)줄바꿈이 일어나는 block 박스에 float 속성을 지정하면 해당 블록의 좌측 혹은 우측 주변으로 다른 요소들이 한줄에 올 수 있게 된다. float 속성의 기본값은 none이며 해당 요소가 오른쪽에 오느냐 그리고 왼쪽에 오느냐에 따라서 right(한줄로 오른쪽부터 정렬) 와 left (한줄로 왼쪽부터 정렬)값으로 설정할 수 있다. 원하지 않는 요소들까지 해당 줄로 올라오는 것을 막으려면 clear 속성을 통해 float 속성을 정리해야 한다. 그러면 clear 속성이 지정된 요소를 포함하여 후속 요소들은 float 효과에서 벗어나게 된다. clear는 left(float:left 속성 정리), right(flaot:right..

padding & margin padding은 어떤 박스 공간의 경계와 실제 내부 요소 간의 거리를 설정한다. 값을 하나만 적으면 상하좌우 4군데, 두 개 적으면 (상하, 좌우) 거리순, 네 개 적으면 12시 방향부터 시계 방향으로 적용된다. margin은 padding 외부의 공간이다. 마찬가지로 패딩처럼 1개를 주면 사방, 2개를 주면 위아래와 양옆, 4개를 주면 12시부터 시계방향으로 하나씩 마진 값을 적용해준다. 바디가 가진 상하좌우 여백은 흰 공간 = margin(바깥여백), 텍스트 주위의 상하좌우 여백은 오렌지색 = padding(안쪽여백) style 태그 내에서 마진 값을 늘릴 경우 흰 공간이 증가하며, padding 값을 늘릴 경우 오렌지색 공간이 증가한다. HTML 코드로 편집 디자인하기..

Selector 이용해서 구조 단위로 스타일 먹이기 선택자를 이용하려면 HTML 코드를 구조적으로 볼 필요성이 있다. 아래 [코드1] 블럭에서 부모 태그인 바디 안의 , , 는 동등한 하이라키에 위치하며, 동등한 계층선 상에 있는 태그들을 형제 태그라고 부른다. 세 개의 형제 태그 중 만이 를 하위 항목으로 가지고, 는 를 하위 항목으로 갖는다. 코드 1. 확정 여행지 목록 2월 : 부산 3월 : 제주 4월 울릉도는 미정입니다. 코드 2. 인강사이트 바로가기 자바 인강 파이썬 인강 CPP 인강 부모 자식 관계의 태그는 내부에서 "부모태그 > 자식태그" 방식으로 작성한다. 두 개 이상의 계층 지정도 가능하며, > 선택자의 경우는 근접해있는 관계의 태그만 표현이 가능하다. 형제 관계인 태그끼리는 내부에서 형..

태그 타입 2 아래의 코드 블럭에서는 input 태그의 타입으로 range, date, datetime, datetime-local, month, week, time, color를 지정해주었다. 여기서 가장 많이 쓰이는 것은 date와 time! 만족도 : 날짜 : 날짜 및 시간 : 날짜 및 시간(현재 지역) : 월 단위 날짜 : 주 단위 날짜 : 시간 : 색상 : HTML 삽입 미리보기할 수 없는 소스 input 태그로 넣어준 텍스트 상자에는 별도의 키워드를 삽입하여 속성을 지정해줄 수도 있다. 태그에 아래와 같은 형식으로 required를 적용하여 필수 입력 필드를 지정해보았다. 해당 필드를 비워놓고 인풋 데이터를 전송할 경우 컴퓨터에서 오류로 인식한다. 필수 입력 필드 만들기 : HTML 삽입 미리..

항목을 나열하는 리스트 속성의 태그들 , 깃허브 커밋 프로세스 터미널 열기 cd 폴더 주소 입력 git add . 입력 git commit -m "커밋메세지" 입력 git push origin master 입력 커밋 완료 태그를 열어 항목을 나열할 수 있다. 태그 안의 각 항목은 태그를 사용해 표시한다. 태그의 항목에는 기본적으로 숫자가 붙는다. 숫자를 표기하지 않고 싶으면 대신 을 사용해주면 되고, 이 경우에는 숫자 대신 작은 원이 붙는다. HTML 삽입 미리보기할 수 없는 소스 [위] 태그로 리스트 입력 HTML 삽입 미리보기할 수 없는 소스 [위] 태그로 리스트 입력 표를 만들 때 쓰이는 테이블 태그 태그를 열어 기본적인 표 자리를 만들어준다. 태그 안에 을 작성하여 하나의 행을 만들 수 있다. 로..

Block tag & Inline Tag HTML 상에서 코드를 한 줄씩 작성할 때마다, 아래와 같이 태그를 여닫아준다. 이렇게 내용을 넣으면 되는데, 내용 앞의 태그를 '열린 태그'라고 부르며 내용 뒤의 태그를 '닫힌 태그'라고 부른다. 태그의 종류에는 두 가지가 있는데 먼저 1) 블록 태그는 태그를 여닫을 때마다 줄바꿈이 적용되는 반면 2) 인라인 태그는 태그를 여닫을 때마다 줄바꿈이 적용되지 않는다. 1) 블록요소 블록 요소의 성질 한 태그가 한 줄씩 차지합니다. 라이브 서버는 저장시 바로 화면이 바뀝니다 2) 인라인 요소는 한 줄 로 표현됩니다. 줄 바꾸기 전엔 계속 가로로 나열.