[html/css] a 태그(문서or링크 연결),padding과 margin의 차이
·
HTML|CSS
20240730수업a태그(다른 문서 또는 링크와 연결) 형식 HTML 삽입미리보기할 수 없는 소스꿀팁- 단축키:li*4>a : ul안에 li4개있고 그 li안에 각각 a가 있음 HTMLCSSJAVASCRIPTSQL HTML 삽입미리보기할 수 없는 소스 (result창만 켜서 볼것) 문제 :: a 태그 top/bottom 여백이 제대로 들어가지 않는 것은 왜 그런걸까? 답안 :: inline 요소 전체의 특징이다. 원래 inline 요소는 margin top-bottom이 안들어 간다고 한다. 위 이미지에서는 마치 padding top이 적용되지 않는 것 처럼 보이지만 실제론 들어간 거다.(브라우저에 가려진 듯) 해결 ::>>a 태그 스타일에도 li에 한거처럼 inline-block을 부여한다.
[html/css]이미지 태그(삽입),css적용
·
HTML|CSS
이미지 넣기 형식 css사용방법 1. external style :외부 파일에 css를 저장하고 불러옴. 2. internal style : 내부 파일에 3. inline style : tag에 style 속성 사용 외부 스타일 파일을 불러온다(여러파일공통스타일) 그림들 여러그림을 보여줍니다 htmlimg { margin: 100px; /*top right left bottom*/ width: 400px; height: 300px; } HTML 삽입미리보기할 수 없는 소스css
[html/css] list작성
·
HTML|CSS
20240730수업 list작성 OrderdList, UnOrderdList 사과 배 바나나 수박 복숭아 포도 바나나 딸기 See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen. ol:ordered list ul:unordered list
[html/css] display mode
·
HTML|CSS
20240730일 수업 display mode 학습 카리나 윈터 원영 유진 카리나 윈터 원영 유진 하니 민지 다니엘 다니엘 해린 혜인 See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen. block : 전체화면의 넓이만큼 공간확보 inline : 콘텐트의 크기만큼만 공간확보 Block 태그 종류 - Iinline 태그 종류 참고문헌 https://www.w3schools.com/html/html_blocks.asp W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering pop..