HTML & CSS (16) 썸네일형 리스트형 CSS(2) - inline / block / inline-block 요소, 배치, 메뉴 만들기, 시맨틱 태그 1) CSS 1-1) 인라인 / 블럭 / 인라인블럭 요소 1-2) 배치(float / clear) 1-3) 가로 배치(float / overflow) 1-4) 메뉴 만들기 1-5) 시맨틱 태그 1-6) 예제 1) CSS 1-1) 인라인 / 블럭 / 인라인블럭 요소 11.CSS 인라인 요소.html 네이버 구글 다음 12.CSS 블럭 요소.html 1 2 3 13.CSS 인라인블럭 요소.html Box1 Box2 Box3 Box4 1-2) 배치(float / clear) 14.CSS 배치(float).html html html ht.. CSS(1) - 기본 문법, 선택자, 텍스트, 목록, 자손 선택자, 박스 모델 1) CSS 1-1) 기본 문법 1-2) 선택자 / 선택자 우선순위 1-3) 텍스트 1-4) 목록 1-5) 자손 선택자 1-6) 박스 모델 1) CSS 1-1) 기본 문법 01.CSS 기본문법.html 내부 Stylesheet 내부 Stylesheet 인라인 Style style01.cssh2 { font-size: 100px; color: blue;} 1-2) 선택자 / 선택자 우선순위 02.CSS 선택자.html 동해물과 백두산이 마르고닳도록 하느님이 보우하사 우리나라 만세 HTML은 재밌다 CSS도 재밌다 JavaScript도 재밌다 프로그래밍 언어 HT.. HTML(3) - form, input 태그 종류 1) HTML 태그 1-1) form 태그 1-2) input 태그 종류2) 예제 1) HTML 태그 home.html 주석 --> Welcome, HOME : HTML 내에 링크를 생성하는 태그 href 속성 : 링크로 이동할 URL을 지정 target 속성 : 링크가 이동할 위치를 지정 _self : 링크를 현재 창이나 프레임에서 열기(기본값) _blank : 링크를 새 탭이나 새 창에서 열기 _parent : 링크를 현재 프레임의 부모 프레임에서 열기 _top : 링크를 최상위 프레임에서 열기 --> .. HTML(2) - 이미지, 텍스트, 테이블 관련 태그 1) HTML 태그 1-1) 이미지 관련 태그 1-2) 텍스트 관련 태그 1-3) 테이블 관련 태그2) 예제 1) HTML 태그 home.html 주석 --> Welcome, HOME : HTML 내에 링크를 생성하는 태그 href 속성 : 링크로 이동할 URL을 지정 target 속성 : 링크가 이동할 위치를 지정 _self : 링크를 현재 창이나 프레임에서 열기(기본값) _blank : 링크를 새 탭이나 새 창에서 열기 _parent : 링크를 현재 프레임의 부모 프레임에서 열기 _top : 링크를 최상위 프레임에.. HTML(1) - WEB, HTML 개념 및 구조 1) WEB 1-1) 개념 1-2) 구성 요소2) HTML 2-1) HTML 문서의 기본 구조3) 예제 1) WEB1-1) 개념WWW(World Wide Web) = W3 = Web- 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 공간- 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공- 하이퍼텍스트(hypertext)란 문서 내부에 또 다른 문서로 연결되는 참조를 집어넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술을 의미 * hyperlink : 문서 내부에서 또 다른 문서로 연결되는 참조 1-2) 구성 요소(1) HTML(Hypertext Markup Language) (2) CSS(C.. HTML & CSS 실습(3) - 로그인 form, menu, media query 1) 로그인 form 1-1) display: flex; 1-2) form 태그 1-3) 로그인 form 구현 2) menu 2-1) 가상 선택자 2-2) menu 구현 3) media query 4) 코드 실습 1) 로그인 form 1-1) display: flex; display: flex;를 적용할 시 두 가지 축이 있는데, 하나는 중심축(main axis)이고 다른 하나는 반대축(cross axis)이다. 그리고 이 축은 수평 방향이냐 수직 방향이냐에 따라 바뀔 수 있다. flex-direction: row / column / row-reverse / column-reverse ; → 아이템들(자식 element의 영역)의 정렬을 row 방향( inline 속성과 동일하다고 이해하면 됨 )으로 하.. HTML & CSS 실습 및 추가 skill(2) 1) display: flex; 2) 추가 skill 2-1) 속성 선택자 ~ 2-2) !important 2-3) class 여러 개 지정 2-4) input: focus{} 3) tab menu 4) 게시판 5) layer popup 1) display: flex; 이번에는 앞서 자주 사용한 float 속성의 여러 기술적 이슈들을 보완함과 동시에 더 사용이 편리한 display:flex;에 대해 알아보도록 하자. 지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 element의 경우, 아래와 같이 부모 element에 padding을, 자식 element에 margin을 부여하여 콘텐츠들을 정렬하였다. display: flex; 적.. HTML & CSS 실습 및 추가 skill 1) CSS 복습 1-1) CSS 적용 방법 1-2) element 위치 조절하는 방법 1-3) 추가 속성 체크 2) 추가 skill 2-1) 속성 선택자 2-2) input[id=" "]:checked { } 2-3) display: none; 2-4) 인접 접근자 + 2-5) :nth-child() 2-6) name 속성 2-7) checked="checked" 2-8) transform / transition 3) 햄버거 메뉴 4) 코드 실습 1) CSS 복습 1-1) CSS 적용 방법 head 영역에 style 태그 추가 inline style link 태그를 이용해 외부 파일 연결 (>> 대부분의 개발자가 가장 일반적으로 많이 쓰는 방법) >> 각 방법별 세부사항은 이전 블로그 글( "CSS 기.. 이전 1 2 다음
