본문 바로가기

학습

 (39)
[CSS]FlexBox 1. FlexBox 1차원으로 요소를 배치하는 방식 가로나 세로로 배치가능 다양한 방식으로 정렬가능 flex-direction justify-conent, align-items flex-wrap gap flex-grow, flex-shrink, flex-basis 2. 배치방향 flex-direction : row; 기본값 왼쪽에서 오른쪽으로 배치됨 column 위에서 아래로 배치 됨 row-reverse 오른쪽에서 왼쪽으로 column-reverse 아래쪽에서 위쪽으로 배치됨 자주 쓰이지는 않음 3. 정렬 요소가 배치되는 방향을 기본 축(Main axis) 기본 축에 수직인 방향 교차 축(Cross axis) justify-content 기본 축 정렬 flex-end 기본축 맨 끝 flex-start ..
[CSS]포지션(position) 1. 포지션 position 속성 static relative abosulte fixed sticky 2. static 포지션 position의 기본 값 원래 있어야 할 위치에 배치 일반적인 글의 흐름을 따른다 3. 기준 위치에서 자리 옮기기 static을 제외한 나머지 포지션은 top right bottom left를 기준으로 위치를 정할 수 있다. 4. relative 포지션 원래 있어야할 위치를 기준으로 자리를 정한다. margin이랑 다른점은 margin은 다른 요소의 위치에 영향을 주지만 포지션을 이용하면 영향을 주지 않는다. 자리를 움직여도 기존위치 영역에 다른 요소가 채워지지 않는다. 5. absolute 포지션 가장 가까이 포지셔닝(static을 제외한 나머지)이 된 조상요소를 기준으로 배..
[HTML]시맨틱 태그(Semantic Tag) 1. 메타 데이터란 데이터에 대한 데이터 2. 시맨틱 태그 특정 의미를 가진 태그 영역을 의미있게 나눌 때 사용한다. div 태그와 기능은 완전히 같다. 작성하는 사람의 의도에 맞게 사용해야한다. 아주 엄격한 사용법이 있는것은 아니다. header 도입부를 나타내는 태그 nav 사이트 안에서 이동하는 메뉴 영역 main (한페이지에서 한번 사용해야한다) 본문 footer 영역 아래쪽에서 정보를 담고 있는 태그 article 독립적이고 완전한 내용을 가지고 있는 태그(ex: 블로그 게시글, 댓글) section 주제에 맞게 영역을 나눌 때 사용하는 태그 figure 이미지와 이미지 설명 3. 시맨틱 태그의 장점 - 검색 엔진 최적화(Search Engine Optimization) SEO 헤드 태그에 메타..
[HTML]폼 태그 1. 데이터를 전송할 때 사용하는 태그 2. 라벨 인풋의 설명 인풋태그를 라벨에 감싸거나 설명 라벨의 for 속성과 input의 id속성을 맞춰주면 label의 내용을 클릭하면 input이 포커스된다. 3. input 태그 name 속성 폼 태그가 데이터를 전송할 때 데이터의 이름 4. input 태그 type속성 text 기본값 password 비밀번호 email 이메일 date 날짜 number 숫자 checkbox 체크박스 여러가지선택 가능 value기본값 on radio 동그란 선택 버튼 여러가지 중 하나 value 기본값 on select 지정 된 값 중에 선택(type이 아니라 태그임) 안에다 option 태그로 목록 생성 file 파일 (accept=".png,.jpg") (multiple)..
[HTML]리스트, 테이블, 멀티미디어 태그 1. 리스트 ol ordered list 순서가 있는 리스트 ul unordered list 순서가 없는 리스트 li list item 리스트 아이템 리스트 스타일링 type 속성을 사용할 수 잇다. type ="a" a. b. c. type ="A" A. B. C type ="1" 1. 2. 3. 4. type ="i" i. ii. iii. 등등 css 사용 가능 list-style: disc, decimal, hangul, none 등등 2. 테이블 태그 테이블 태그 테이블 로우 테이블 셀 table header 제목내용을 적는 셀 테이블 꾸미기 border를 넣어준다 셀 사이 공간 없애기 table { border-collaps: collaps; } 셀 사이 공간 늘리기 table { border-..
[HTML]링크 1. HyperText Markup Language 링크로 연결된 문서를 만들고, 구조와 의미를 마크업하는 언어 속성에서 true false를 값으로 가지는 속성은 속성이름만 적는 방법이 있다. 기본값이 false 2. 링크의 상대주소 index.html 링크를 연결할 때 / 다음 파일이름을 작성안하면 index.html에 연결된다. ./ 현재폴더 ../상위폴더 / 최상위 폴더 3. 페이지 안에서 이동하기 URL 프래그먼트 : 주소 맨 뒤에 붙어 해당 주소의 일부분을 가리킨다 태그의 아이디를 이용 4. 링크 새창 열기 target="_blank" 임의의 target target="이름" 해당 타켓으로 새로 열린 새창에는 같은 타겟 속성값이 있는 창들이 열림 5. a 태그로 메일 보내기, 전화걸기 href..
[CSS]선택자, 가상클래스, cascade 1. 선택자 목록(selector list) 선택자1, 선택자2 ...{ 내용 } 2. 선택자 붙여 쓰기 태그선택자#id.클래스 .클래스.클래스 #id.클래스 등등 여러방법으로 쓸 수 있다. 붙어있는 선택자를 모두 가지고 있는 요소를 선택한다. 태그선택자가 포함되어있으면 태그선택자를 제일 앞에 둬야 한다. 아이디와 클래스는 순서가 상관없다. 3. 자식, 자손 선택하기 자식 결합자 부모 > 자식{ } 자손 결합자 조상 후손{ } 4. 가상 클래스 선택자::before 또는 선택자::after css 속성 content를 꼭 써줘야 함 content: ''; 선택자:hover 마우스를 올릴시의 스타일 선택자:active 클릭하고 있을 때의 스타일 선택자:focus 포커스가 적용될 때 스타일 선택자:visit..
[CSS]CSS 기본 정리 - 3 1. 배경 이미지 background-image: url('주소'); background-repeat : no-repeat; 이미지의 반복여부 background-position : center; 이미지의 위치 background-size: cover; cover 높이나 넓이기준으로 이미지를 가득채움 contain은 높이나 넓이기준으로 이미지가 잘리지않게 채움 한번에 작성하기 background : url('주소') no-repeat center / cover; 2. 그라디언트 background-image : linear-gradient( (각도), 시작색깔, 끝색깔); 만들기 복잡해서 인터넷에서 gradient generator 검색하면 쉽게 만들 수 있음 3. 배경 위에 그라디언트 겹쳐보기 back..

티스토리툴바