HTML & CSS (6) 썸네일형 리스트형 HTML 부모태그와 자식태그 과 ,,로 예시를 들어봅시다. name minseo sunset hi good soso 테이블의 시작과 끝을 알리는 부모태그이다. 하나의 행(row)의 시작과 끝을 알리는 부모태그이다. 셀의 헤더를 의미하는 자식 태그이다. 굵은 글씨로 나타남 셀의 값(data)을 표현할때 사용하는 자식태그. 결과 HTML 삽입 미리보기할 수 없는 소스 /, 로는 bank home shop market bank home shop market unordered list ordered list list 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 *부모 태그가 필요함 * 반드시 부모 태그/를 가져야하며 부모태그도반드시 자식태그를 가져야함 결과 HTML 삽입 미리보기할 수 없는 소스 부모,자식 태그를 활용하여 웹 페이.. CSS-inline/inline-block/block inline 자기(content)의 크기 만큼을 차지한다. background로 이미지를 준다면 나타나지 않거나, text 길이정도의 크기만 표시된다. 이럴 경우 tag를 바꿔주든 css에서 display:inline-block; 으로 설정을 해준다면 본인 tag그대로 사용할 수 있다. element가 inline인 tag등이 있다. ,를 사용하면 한줄에 나타난다(줄바꿈이 일어나지 않는다). inline element는 height,width가 임의로 적용되지 않는 특성이 있습니다. margin,padding은 좌우간격만 반영이 되며 상하간격는 적용되지 않는다. inline-block 두가지 성질이 같이 나타나는데 기본적으로 inline처럼 한줄에 배치된다. block과 같이 height,width,pa.. Img tag & background-image 차이 https://blog.px-lab.com/html-img-tag-vs-css-background-image/ https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern https://velog.io/@geonoo99/Semantic-Web-%EA%B3%BC-Semantic-Tag-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 Img tag html -디자인 요소가 아닌 콘텐츠와 관련 -img tag에는 스크린 리더 및 검색 엔진에서 선택할수 있는 대체 텍스트 및 제목 속성을 넣어놓는 경우가 있음 ->검색엔진(SEO)에 의해 인덱싱됨 -css에 많은 배경이있는경우 페이지 로딩이 시간이 걸림(html.. CSS-2 font style font family font family는 폰트 종류를 지정하는 속성 아래 세개의 폰트값은 브라우저가 첫번째 폰트를 지원해주면 첫번째 폰트 적용 아닐시 두번째 폰트가 적용된다. 여러개의 폰트는 예비로 있는 폰트이다. 폰트 이름에 띄워쓰기가 있을시 " "를 사용해야한다. #name{ font-family: Georgia, "Times New Roman", Times, serif; } font-size 폰트의 크기를 지정해준다. h1{ font-size: 40px; } h4{ font-size: 50px; } 원래 h1의 글씨 크기는 h4보다 커야하지만 적용해준 font-size 대로는 h1이 작다. 브라우저에서는 먼저 태그를 확인하고 그에 맞게 스타일을 적용합니다. 하지만 해당태그나 .. CSS - 1 CSS는 HTML태그에 디자인을 넣어주는 것이다. CSS적용 하는 방법 3가지 1.태그 style 속성에 직접사용 html 제목1 html -작성하기엔 편함 하지만 스타일이 많아지면 가독성이 떨어짐 -html 태그와 style이 같이 있어 유지보수 힘듦 html 제목1 html 2. style 태그 html 파일 내에 CSS작성 방법 -html구조와 디자인이 분리되지 않아 유지보수에 적합하지 않는다 3.CSS 파일에 작성 html파일에 적용하여 주기위해 연결해줘야함 CSS 문법 -태그이름으로 스타일적용(ex html: ) a { color : blue; text-align : center; } -class name으로 스타일적용(ex html:) .hi { color : blue; } -id로 스타일 적.. HTML 시작하기 HTML은 웹페이지를 만들기 위한 언어로 브라우저만 있다면 HTML로 작성한 것을 확인할 수 있습니다. .html은 확장자가 붙은 텍스트 파일입니다. 텍스트 편집기같은 앱을 열고 .html확장자로 저장한 후에 해당파일을 브라우저에 drag& drop하면 작성한 HTML파일을 확인할수 있습니다. 또한 텍스트만 작성하여도 .html확장자를 인식하여 브라우저가 자동으로 필요한 테그들을 붙여주고있습니다. 필수 HTML TAG ---------------> 다음은 이전 1 다음