Frontend (6) 썸네일형 리스트형 CSS 활용 2편 (CSS 태그 배치) 지난글에 이은 CSS 활용 2탄이다. 목차 1. CSS 박스 유형 제어 display 2. CSS 박스 위치 지정 position 3. 기타 1. CSS 박스 유형 제어 display html의 태그는 블록 태그와 인라인 태그로 나뉜다. 대표적으로는 블록 박스, 은 인라인 박스를 출력한다. display 프로퍼티로 박스 유형을 설정할 수 있다. 블록 박스 display : block 인라인 박스 display : inline 인라인 블록 박스 display : inline-block 항상 새 라인에서 시작 새 라인에서 시작 못하고 라인 내에 위치 새 라인에서 시작 못하고 라인 내에 위치 블록 박스 내에만 배치 모든 박스 내 배치 가능 모든 박스 내 배치 가능 옆에 다른 요소 배치 불가능 옆에 다른 요소 .. CSS 활용 1편 CSS로 적용할 수 있는 스타일에 대해 정리했다. CSS 적용 방법이 어려우면 이전글을 참고하면 된다. 목차 1. CSS 색 표현 2. CSS 텍스트 스타일 3. CSS 단위 4. CSS 폰트 5. CSS div 박스 모델 6. CSS 배경 다루기 7. CSS 텍스트 그림자 / CSS 박스 그림자 8. CSS 마우스 커서 제어 1. CSS 색 표현 CSS로 색 적용 시킬 수 있는 프로퍼티(속성)는 3가지가 있다. 1. color (텍스트) 2. background-color (배경 ) 3. border-color (테두리) 색 적용 방법 1. 색 이름 2. 16진수 3. rgb 2. CSS 텍스트 스타일 1. 들여쓰기 text-indent : (단위나 퍼센트로) 2. 정렬 text-align : (lef.. CSS와 셀렉터(Selector) html 파일에 CSS를 적용하는 방법에 대해서만 다루고 있다. 구체적인 CSS 태그나 속성들에 대해서는 다음글을 참고하면 된다🤭 CSS 적용하기 1. 태그 CSS / 셀렉터 예제 Hello World 중첩된 style frontend study HTML5 CSS JAVASCRIPT backend는 더 어렵다 external.css body{margin-left: 30px; margin-right: 30px;} p{background-color: pink;} 결과 CSS를 더 공부하고 싶다면 아래 게시글을 참고하자 CSS 활용 기본 CSS로 적용할 수 있는 스타일에 대해 정리했다. CSS 적용 방법이 어려우면 이전글을 참고하면 되고, CSS 활용 고급은 다음글로 작성 예정이다!! 목차 1. CSS 색 표.. HTML 웹 폼 [Web Form] 태그 폼 요소 작성 폼 요소 1. 2. HTML 문서 구조화를 위한 시맨틱 태그 [Semantic Tag] 시맨틱 태그 1. 머리말 2. 하이퍼링크 집합 / 목차 3. 본문 / 장 4. 본문과 연관 있는 독립적 영역 5. 본문과 벗어난 노트나 팁 6. 꼬리말 위치나 색, 모양 등이 자동으로 결정되는 것이 아니기 때문에 CSS3를 이용해 직접 지정 해줘야한다. 시맨틱 블록 태그 1. 그림(사진,차트,삽화,소스코드 등)으로 블록화 2. 상세정보 3. details의 제목 표현 시맨틱 인라인 태그 1. 중요한 텍스트 2. 시간임을 표시 3. 범위나 퍼센트의 데이터 량 표시 4. 작업 진행정도 HTML 기본 태그 정리 학교 강의 자료를 기반으로 작성한 html 태그 정리 1. 브라우저의 타이틀 지정 2. 제목 달기 , 등등 3. 툴팁 달기 (마우스 대면 나오는) 4. 단락 나누기 5. 수평선 6. 줄바꿈 7. 포맷 그대로 8. 텍스트 꾸미기 진하게 / 중요한 / 강조 / 이텔릭체 / 작게 / 취소선 / 밑줄 / 윗첨자 / 아래첨자 / 하이라이팅 9. 대표적인 블록태그(새 라인, 한 라인 독점) 10. 대표적인 인라인 태그(블록의 일부) 11. 메타 데이터 기본 url / 외부 자원 연결 / / / / 웹페이지 저작자, 설명, 키워드, 문자 등 모두 안에 작성 (는 도 가능) 12. 이미지 삽입 src = 파일의 url / alt = 사진이 없을 때 지정할 문자열 / width = 폭 / height = 높이 13. 리.. 이전 1 다음
