html/css

기본태그 목록태그를 열었으면 /닫아야 하는데, 닫지 않아도 되는 태그가 존재한다.href는 클릭시 이동할 링크를 기입.src는 파일 경로를 기입.용도에 맞는 태그 사용하기.<실습 코드><결과><숙제>p태그 내부의 일부 글자에 링크 걸기\-> 일부 글자를

\-> 스타일 여러 개 적용 시, 세미콜론 필수!큰 의미가 없는 span 태그로 감쌈.(참고) span 태그는 display : inline 이라는 스타일 속성을 내포.display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없음!이미지

저번에 만든 자기소개 페이지의 스타일을 인라인방식이 아닌,외부 css문서를 가져와서 연결하는 링크 방식으로 변경.위의 다양한 셀렉터가 겹치게 된다면, 적용되는 우선순위가 있다.style="" >>>>>>>>>> \*\*

네모 박스 만들기margin은 바깥 여백padding은 안쪽 여백margin과 padding을 원하는 방향에만 줄 수 있다모든 div, p, h1, li 등은 기본적으로 display : block 속성\-> 한 행을 전부 차지하게 된다.이게 싫다면 display 속성

각각의 박스를 하나의 박스 안에 담아 표현.요소를 공중에 띄워 왼쪽/오른쪽 정렬하는 float 속성을 사용하여한 줄에 두개의 박스를 표현.float를 쓰고 나면 항상 clear 속성이 필요. (공중에 띄어져 표현되므로 다음 박스가 가려져버림)\-> clear: both

가로로 정렬할 때 float 대신 inline-block 사용 가능.display: block (한 행을 전부 차지)display: inline-block (내 크기만큼 차지)다만, 태그 사이에 스페이스 공백이 있으면 깨지기 때문에, 공백 제거 필요.방법1. 주석처리

회고1 : 내가 짠 코드는 전체를 감싸는 블록을 안 만들어 주었다.그래서 두개의 박스를 가운데 정렬하는 것이 힘들었는데,하나의 박스(container)로 묶어주면 가운데 정렬이 쉽다.<가운데 정렬 복습>display: black;margin-left: auto;m

띄어쓰기 하면 됨.공백을 이용하여 클래스 안의 자손을 선택할 수 있음.바로 밑에 있는 자식만 선택가능.\++) .navbar li>span 이렇게 상세히 선택 가능.링크 밑줄 없애기text-decoration: none;링크 방문 후 스타일 지정.class:visiti

background-image: url(../img/shoes.jpeg); background-size: cover; background-repeat: no-repeat; background-position: center;../ (상위 요소로 가서 이동

좌표 속성을 이용하려면 기준이 되는 위치를 지정해줘야 한다.그것이 바로 position.position 속성은 4가지가 있다.\-> 여기서 absolute는 position: relative값을 가진 부모가 기준이다.부모에 달라 붙어서 위치이동을 하게 된다.

position 연습+숙제 겸 완성한 페이지!단순하지만 그래도 뿌듯하다!!

div 박스의 width를 주게 되면 content부분의 크기만 고려한다. -> 파란색 부분만 width인 셈! 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성 필수 기본값 CSS 리스트 예시 근데 이제 하나하나씩 box-sizing 속성을 추가하기에는

웹 페이지에서의 입력 양식을 의미.form name="" (작성한 내용이 전달되는 이름)form action="" (작성한 내용이 어떤 서버경로로 전달될지)form method="" (작성한 내용이 어떤 방식으로 서버에 전달될지)placeholder => 배경글자val

링크: https://contactusstudy.leebin0603.repl.colabel 태그와 for태그를 사용하여 버튼대신 라벨을 클릭해도input을 선택하도록 할 수 있다.

가로행을 만들 땐 tr세로열을 만들 땐 td제목용 세로열을 만들 땐 th제목행은 thead일반행은 tbody에 넣으면 좋음기능은 똑같다.테이블 내에서 글자 상하 정렬할 때아래 사진처럼 만들어 오기가 숙제다.그리고 얼레벌레 만든 내 카트...링크: https:/

꼭, hover, focus active 순으로 적어야 오류가 안 남.\++참고) text-decoration : none 추가하면 링크 밑줄 제거 가능.class 작성 시, 뼈대와 살을 분리하자!기본 utility class를 만들어 두고, 클래스 여러 개를 적용시켜

원래 font-family로 폰트를 적용할 수 있지만,컴퓨터에 설치 되어 있지 않은 폰트는 다음과 같이 적용 가능.이외에 구글폰트 사이트를 이용할 수도 있다.윈도우는 확대했을 때, 글자가 각져보일 수 있음.아래처럼 회전하면 부드러워진다!

박스를 감싸는 부모 요소에 display : flex 적용하면 됨.그럼 박스들이 기본적으로 가로정렬로 배치.업로드중..