HTML

[HTML/CSS] 레이아웃 <position> 원하는 위치로 이동시키기 , 겹쳐서 출력하기

기본적으로 정렬 위치는 위 -> 아래 , 좌 -> 우 이다 사진위에 글씨를 넣는다거나 겹쳐서 출력해야하는 경우 position과 함께 relative 와 absolute를 활용한다 내용이 이동되면서 relative 는 빈공간을 유지하고 absolute 는 빈공간을 아래 내용이 올라와 채우게된다 이동할 요소는 absolute 로 지정하고 기준점이 될 요소는 relative로 지정한다 absolute는 relative를 기준으로 이동하게된다 #search{ position : absoulte; right : 20px;} -> 이동할요소 기준점인 header의 오른쪽에서 20px 떨어져서 출력 header 에 position : relative 추가 -> 기준점 겹쳐서 출력하기 기본적으로 아이콘 넣고 넣은 화..

[HTML/CSS] 레이아웃 <flex> 2 , 양쪽 끝 정렬하기 , 3단 레이아웃 게시판모양 만들기

왼쪽메뉴 1 왼쪽메뉴 2 오른쪽메뉴 1 오른쪽메뉴 1 왼쪽메뉴와 오른쪽메뉴를 각각 div로 묶은 뒤 부모속성에 스타일 적용하기 기본내용만 적었을때 display : flex = 수직정렬이 수평정렬로 바뀜 justify-content: space-between; = 양 옆으로 정렬 align-items: ceter; = 내용 가운데정렬 3단 레이아웃 보통 사이트의 기본 구성 헤더, 가운데 내용 들어가는 부분, 마지막 회사정보들어가는 보통 많은 사이트에서 확인할 수 있는 사이트 기본구성이다 가운데 내용부분은 보통 3구역으로 나뉘는데 수직정렬이 기본이기때문에 수평정렬로 바꿔주어야한다 semantic 태그를 이용한 레이아웃 header, nav, footer, section, article, aside 부모기준..

[HTML/CSS] 레이아웃 <flex>

- 요소는 원래 위 ->아래, 좌 ->우로 배치 - inline-block : 요소의 배치 방법이 바뀐다, 쓰기 좋은것은 아님 - float : 원래 목적대로 배치 - flex : 좌우, 위아래 배치 - position : 내가 원하는 임의의 위치에 고정 이미지와 텍스트 배치 style= "float :left 사진이 왼쪽으로 배치돼서 아래쪽에 있던 텍스트가 위로 올라왔다 flex 레이아웃(부모속성에 적용) 1 2 3 4 5 각 색이 적용된 div(자식속성) 전체를 감싸준 div 수평배치 flex방식은 두 개의 축이 생성된다(main 축, cross 축) - main 축 : 자식들의 정렬 방향 - cross 축 : 정렬방향과 반대 정렬하기 center - 가운데 정렬 외에도 사방으로 정렬 가능 space..

[HTML/CSS]input(id,비밀번호, 라디오, 라벨, 체크박스 , 메뉴선택, 글상자)

부모,자식 선택자 선택자를 지정할때 모든 태그에 class를 걸어 이름을 지을 수 없으니 부모,자식 선택자를 활용하여 css를 적용한다 first라는 선택자 안에 a 태그가 있을때 first, a -> 둘 다 지정 first a -> first 안에 있는 a first>a -> first 바로 아래 있는 a 만 form -> " "의 서버로 사용자가 입력한 내용을 전달한다 에 어떤내용이 들어가는지 적어준다 서버로 입력내용을 전송하는데 name은 서버에서 사용하고 id는 프론트에서 사용한다 로그인 아이디 비밀번호 로그인 radio 라디오는 한가지만 선택이 가능하다 name으로 gender 와 year로 구분해줘서 각 항목에 한개씩 선택 가능하다 label로 감싸주기전에는 동그라미 부분을 딱 클릭해야 선택이..

[HTML]테이블 만들기 , 테이블 병합하기

을 이용해 테이블 만드는 것을 배웠다 테이블은 셀 간격이 일정하기때문에 게시판을 만들거나 메뉴 만드는 등 여러곳에서 활용이 가능하다 : 행 (세로) : 열 (가로) 행,열 항상 헷갈림 ,,, 외곽선을 만들기 위해 table 과 td 같이 border을 적용하면 위에 있는 사진처럼 선이 2겹으로 나타난다 border-collapse: collapse 를 적용하면 한줄만 보인다 는 제목 넣을떄 사용하는 태그로 텍스트가 굵게 표시된다 제목부분에는 셀을 나누는 선이 그려져있지 않은데 th부분에는 스타일 지정이 안되어있는 걸 확인할 수 있다 선택자 - 태그 한번에 만들기 table>tr*3>td*3 테이블 밑에 tr세개 그 안에 또 td세개 셀 병합하기 (rowspan, colspan rowspan : 세로병합 ..

<ul>을 이용해 메뉴 만들어보기 , 마우스 올렸을때 다른 디자인 적용(hober)

리스트 만드는 태그인 를 이용하여 메뉴 만들어보기전 해본 것 전체 A B C div 부분에 각각 A B C 를 로 엮어서 선택자를 각각 색깔로 지정해줬다 div{} 에는 내용을 가운데로 오게 하기 위해 text-align: center; 을 사용했고 inline-block 원래 div정렬이 아래로 나열되어있는데 오른쪽으로 나란히 나열되게 하기 위해 display : inline-block; 를 넣어줬다 귤색 부분이 margin인데 인라인블럭 적용x 일때는 margin(빈공간)이 존재해서 아래로나열되지만 적용o 일때는 margin이 없어서 빈공간을 채우기 위해 아래 있던 div가 위로 올라와 오른쪽으로 나열됐다 떨어져있는 공간 붙이기 아무것도 설정 안했을 경우 왼쪽처럼 div간 간격이 존재해서 margin..

인천일보아카데미 개발 국비교육 사전교육

내나이 서른,, 자금쪽에서 4년차로 일하고 있다가 별안간 퇴사하고 인천일보아카데미에서 진행하는 6개월짜리 국비교육과정을 듣게됐다 컴퓨터하고는 평소 거리가 먼 나지만 할 수 있다 할 수 있다!!!!! 사전교육은 본 과정 시작 전 일주일동안 하루 세시간반정도로 진행됐다 이 과정이 얼마나 힘들것이고 ,,,(시험이 정말 많고 보충수업도 많을 거라고 함) 개발자라는 직업이 얼마나 힘들지 ,, 그런 얘기들을 해주셨다 처음에는 html로 시작했는데 개발 공부 하기로 마음먹고 html은 한번 해봐서 따로 포스팅은 하지 않을 것이다 비쥬얼스튜디오코드 라는 프로그램을 이용하여 아주 기본적인것들을 해보았다 html:5 를 치면 기본적으로 작성되는 내용들 초록색으로 써있는 글들은 설명글로 따로 입력한 것 각각에 대한 설명이 ..