본문 바로가기

개발58

[css] flexbox flexboxflexbox는 뷰포트의 요소나 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다. flexbox를 1차원이라 칭하는 것은 레이아웃을 다룰 때 하나의 차원(행이나 열)만을 다루기 때문이다, 이는 행과 열을 함께 조절하는 grid와 대조되는 점이다.flex 속성을 사용할 때에는 내가 자유롭게 배치하고 싶은 항목들을 감싸고 있는 컨테이너를 flex로 지정한다. flex로 지정된 컨테이너의 일차 자식이 flex 항목이 된다. 👉여기서부터는 flexbox 속성 1) flex-direction: 주축(main-axis)를 결정한다.row: 열의 정방향row-reverse: 열의 역방향column: 행의 정방향column-reve.. 2022. 9. 18.
[css] transform, transition, animation transform, transition, animation1. transform요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여하는 속성. transform 대부분의 함수는 XYZ를 붙여 한 축으로만 변환하는 기능으로 사용할 수 있다. 함수 값기능rotate(10deg) / rotate(0.5turn)시계 방향으로 회전. 음수로 작성하면 시계 반대 방향. scale(2, 3)width 2배, height 3배 확대. 축소하고 싶을 땐 1보다 작은 값 써주기. skew(10deg, 20deg)x축 10도, y축 20도 회전.translate(100px, 200px) / (12px, 50%) 위치 변경. 2. transitiontransition은 요소의 두 가지 상태 사이의 변화를 설정해 주는.. 2022. 9. 14.
[html] 기본 태그 2 많이 쓰이는 32개의 태그 중 나머지. § div 태그division의 약자. block 요소로 레이아웃을 나눌 때 주로 사용한다. class나 id 값을 붙여 css와 함께 사용. § span 태그div처럼 레이아웃을 나누는 태그로 css와 함께 사용한다. div와의 차이는 inline 요소라는 점. § script 태그코드 삽입을 위한 태그. 따로 파일을 만들지 않고 코드를 참조하기 위해 사용한다. 보통 javascript 코드를 넣는 것으로 사용. body의 가장 아래에 넣어 쓰며, 파일을 분리할 때는 다음과 같이 작성하여 연결해 준다. § style 태그css 설정을 같은 웹페이지 안에서 정의할 때 사용. style 태그로 css를 입력하는 방식을 인터널 방식이라고 한다. head 태그 안쪽.. 2022. 9. 14.
[javascript] inner/outerHTML, textContent 비교 inner/outerHTML, textContent 비교1. element.innerHTML요소 노드 내부의 html 코드를 문자열로 리턴해 준다, 내부에 있는 행갈이나 들여쓰기 모두 포함하여.> 요소 안의 정보를 확인할 수도 있지만 내부의 html 자체를 수정할 때 자주 활용된다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!) 2. element.outerHTML요소 노드 자체의 전체적인 html 코드를 리턴해 준다. inner와 마찬가지로 행갈이, 들여쓰기 모두 포함이다.(새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의!) 3. element.textContent요소 내부 내용들 중 html 태그를 제외한 테스트만 출력. 마찬가지로 행갈이, 들여쓰.. 2022. 9. 13.
[html] 기본 태그 1 많이 쓰이는 32개의 태그 중 일부. § 제목 태그어쩌구 저쩌구어쩌구 저쩌구...어쩌구 저쩌구 제목이나 부제목에 사용. 숫자는 정보의 중요도를 나타내며 숫자가 클수록 폰트 사이즈 작음. 크기 조절용으로 사용하지 말 것! § 본문 태그어쩌구 저쩌구에 대한 본문 내용본문 내용을 담는 태그. p 태그끼리 이어서 쓰면 p태그 덩어리 사이에 한 줄 공백이 자동으로 들어가므로 p를 사용해 여백 조절하지 말고 css를 통해 스타일링 할 것. § 줄바꿈 태그본문 내용 중에서 행갈이 하고 싶은 부분에 태그 하나만 적용. § 수평선(가로줄) 태그내용의 분리 등을 위해 가로줄을 긋고 싶을 때 사용하는 태그. § 이미지 태그../imges/파일명.jpg" alt="대체 텍스트"> 상대 경로https://이미지 주소".. 2022. 9. 12.

티스토리툴바