profile
개발을 취미로 할 수 있는 그 때 까지

HTML파일에서 CSS 파일 link 걸기(속성 뜻)

html 파일에서 css 파일을 참조하려면 link 태그를 사용한다. 아래 코드의 <link href= .. 부분항상 툴에서 자동으로 해줘서 각 속성이 어떤 뜻인지 몰랐는데 이번 기회에 정리해보기로 했다.link taglink 태그로 사용할 css 파일을 링크해준

2020년 10월 23일
·
0개의 댓글

CSS3 - HTML img 태그에 넣은 svg 파일의 색상 바꾸기

https://www.color-hex.com/https://codepen.io/sosuke/pen/Pjoqqp위의 페이지에서 Target color 에서 hex 값 넣고, filter 값 알아내기검색해보니 동일한 모양의 색갈이 다른 여러 개의 파일을

2020년 10월 23일
·
0개의 댓글

CSS : Selector (선택자)

전체 선택자이며 아래와 같이 조합해서 사용한다.요소 이름 (태그 이름) 의 모든 요소를 선택한다.지정한 클래스 이름을 가진 모든 요소를 선택한다.지정한 아이디 하나를 선택한다.(고유)태그가 가진 속성을 이용하여 선택한다.input attr해당 속성을 가지고 있는 inp

2020년 10월 23일
·
0개의 댓글
post-thumbnail

HTML&CSS : overflow 속성 정리

CSS overflow 속성 정리 상속 되지 않는다. 애니메이션 되지 않는다. > overflow: visible 영역을 벗어난 부분을 표시한다 (기본 값) > overflow: hidden 영역을 벗어난 부분을 잘라서 보이지 않게 한다. > overflow

2020년 10월 22일
·
0개의 댓글
post-thumbnail

CSS : flex (display)

예전에는 HTML 화면을 배치하기 위해서 float 이라는 속성을 많이 이용했다고 한다.그런데 float 은 예상하지 못했던 동작들이 많이 발생하고, 원하는 대로 화면을 구성하기 위해서 필요없는 HTML 요소를 추가적으로 작성해야하는 일이 생길수도 있다.그런데 flex

2020년 10월 21일
·
0개의 댓글
post-thumbnail

CSS : position 속성 정리

HTML 요소가 가지고 있는 postion 속성으로 해당 요소의 위치를 절대 위치 값과 상대 위치 값을 조절하여 배치할 수 있다. position 개념을 이해하기 전에 알아야 할 한 가지 특징은, position 속성은 상속되지 않는다는 것이다. 예를 들기 위해 임

2020년 10월 21일
·
0개의 댓글

CSS : display 기본 속성 정리(inline, block, inline-block, none)

display 속성에서 가장 많이 쓰이는 기본 속성은: inline, inline-block, blockHTML 요소를 줄바꿈 하지 않고 한 줄에 나란히 배치되도록 만드는 속성이다.이 속성을 쓰면 기본 block 레벨의 요소도 inline 속성이 된다.즉, block

2020년 10월 21일
·
0개의 댓글

HTML data-* 태그

HTML data-\* 태그data 태그는 HTML에서 지원하는 태그를 커스터마이징 할 수 있는 태그이다.복잡한 화면을 구성할 때 간혹 class, id, name 만으로 충분하지 않는 경우가 있다.혹은 어떤 라이브러리를 사용했을 때 class 혹은 id 가 고정값으로

2020년 10월 20일
·
0개의 댓글

HTML block 레벨 요소, inline 레벨 요소

HTML block 레벨 요소, inline 레벨 요소block 레벨은 html 문서에서 공간에 상관없이 한 줄에 하나의 요소가 배치되는 요소이다.inline 레벨은 html 문서에서 공간이 허용하면 바로 옆에 배치되는 요소이다.아래 코드의 결과는다음과 같이 된다.th

2020년 10월 20일
·
0개의 댓글
post-thumbnail

Semantic HTML

#Semantic HTML HTML을 작성할 때 자유롭게 태그를 선정하여 원하는 레이아웃을 만들 수 있다. 하지만 작성한 HTML을 다른 누군가가 수정하려고 할 때, 어떤 태그가 어디에 쓰였는지 그 의미를 파악할 수 없다. 그래서 각 태그의 이름을 통해서 이 부분은 화

2020년 10월 20일
·
0개의 댓글