클론코딩2 [211223] 클론코딩 / 게시판 만들기 목차 클론코딩 / 게시판 만들기 1. 구역 나누기 2. 이미지 삽입하기 3. 선 삽입하기 3-1 border과 문제점 3-2 해결방식 4. 모서리 둥글게 만들기 5. 텍스트 가운데 정렬 6. 마우스 오버 기능 클론코딩 / 게시판 만들기 1. 구역 나누기 table을 사용할 수도 있겠지만 보다 깔끔하고 수정이 용이한 ul, li기능을 사용한다. 좌측 초록색 박스와 우측 초록색 박스의 행렬이 다르기때문에 각각 다르게 작성한다. 빨간 박스 초록박스(좌) -> ul 보라색박스 6개 -> li 오렌지색박스 3개 배경에 이미지 삽입 초록박스(우) 보라색박스(상) 2개 보라색박스(하) 1개 작성한 html 2. 이미지 삽입하기 #container > #left>ul>li{ background: url("../img/.. 2021. 12. 23. [211222] CSS 이미지, 링크 넣기, position, 클론코딩 더보기 더보기 더보기 목차 1. 엘리먼트 안에 같은 엘리먼트를 넣기 1-1. div 1-2. ul, li 1-3. inline-block의 단점 1-4. float 2. 이미지 넣기 3. 메뉴 만들기 1. 엘리먼트 안에 같은 엘리먼트를 넣기 1-1. div 원래 모든 엘리먼트는 기본적으로 여백을 어느정도 가지고있다. 처음에 시작할때 margin, padding을 0으로 놓고 시작하면 편하다. 코드가 실행되는 위치 무조건 왼쪽 상단 꼭지점부터 시작해서 생성됨. 같은 위치에서 생성될 경우 나중에 실행된 코드가 위에 덮어씌워진다. 후발 생성된 엘리먼트는 속한 엘리먼트 기준으로 생성되는 위치가 달라진다 ex) 가운데 정렬된 1번 박스 안에 2번 박스를 생성한다. -> 가운데 정렬된 1번 박스의 왼쪽 상단 꼭지점.. 2021. 12. 22. 이전 1 다음
