프론트엔드 첫걸음

css 파일 내에 같은 요소를 두고 여러 줄에 걸쳐서 효과를 주게 되는 때가 있다. 그러면 어떤 것이 우선순위인지, 왜 내가 의도한 결과가 나오지 않았는지 확인해야한다. 이때 크롬디버깅 툴을 사용한다. 내가 확인하고 싶은 요소 우클릭-> 검사 하면 내가 확인하고 싶은 요소의 css 스타일을 확인할 수 있다. 여러 줄에 걸쳐서 적용된 효과가 우측에 우선순위가 높은 순서대로 나타난다. 예)

1. cdn 방식 - html에 아래 link 태그 넣는다 해당 링크 태그 얻는 방법. => font awesome 5 cdnjs 검색하면 맨위에 뜨는 사이트 들어가서 https://cdnjs.com/libraries/font-awesome 링크 복사 클릭 라이브러리 설치가 간편하고, 속도가 빠르다는 장점이 있지만 fontawesome 사이트에 의존하고 있어 불안정하다는 단점있다. 안정적으로 사용하고 싶다면 다운로드 하여 사용한다. 2. 다운로드 방식 https://fontawesome.com/download Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles..

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ p,h1,h2,h3,h4,span { transform : rotate(o.03deg) } 윈도우에서 굴림, 돋움폰트가 깨질때 웹상의 글자를 살짝 돌리면 폰트가 부드럽게 처리된다.

body { font-family : 'gulim', 'gothic' , 'dotum' } - body에 font-family라는 속성으로 사용할 폰트명을 적는다. - font-family는 상속(inherit)되므로 body에 적용하면 전체에 적용됨 - 사용자의 컴퓨터에 설치된 폰트가 순서대로 보여진다. 위의 경우 사용자의 컴퓨터에 gulim이 없으면 gothic이, gothic이 없으면 dotum이 적용된다) 사용자의 컴퓨터에 없는 폰트를 적용시켜서 보여주고싶으면 CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적으면 된다. @font-face { font-family: 'nanumGothic'; src: url(../font/NanumGothicLi..

pseudo-class 셀렉터를 붙여 상태에 따른 스타일을 지정해 줄 때는 hover > focus > active 순서대로 지정해야한다.

- ITEM 칸을 길게 확보하고 싶을 때 ITEM 칸의 th에 클래스명 cell-long 을 넣고 아래와 같이 width 설정 할 수 있다. Item Amount Price Total /* CSS */ .cell-long { width: 140px; } - td에 설정하는 width는 max-width라고 생각하면 좋다. 같은 행의 다른 td의 기본 width를 보존하는 범위에서 최대한 ~ 지정한 width 까지 확장된다는 뜻이다. - 한 행의 td에 width 설정하면 자연스럽게 같은열의 td의 width에 모두 적용된 것과 같다. - 그러나 :nth-child(n)를 사용하면 굳이 클래스를 하나 달지 않아도 ITEM 칸에 CSS를 적용할 수 있다. See the Pen th:nth-child(2) b..

table { border-collapse : collapse; } 일부 브라우저에서 table의 border-collapse적용할 때 border-collapse와 border-radius가 충돌하여 table의 border-radius 안먹을 수 있다고 한다. 첫번째 해결방법 - border-top-left-radius 사용 table { border-collapse : collapse; border-spacing : 0; } (왼쪽위에있는 td) { border-top-left-radius : 5px; } 두번째 해결방법 - box-shadow 사용 table { border-collapse : collapse; border-radius : 7px; border-style : hidden; box-..

See the Pen Untitled by JEONG (@cona) on CodePen. a { /* 밑줄 사라지게 하기 */ text-decoration: none; /* 글자 색 */ color: black; /* a 태그의 범위 넓히기 */ display: block; height: 100%; width: 100%; padding: 0; margin: 0; /* a 태그의 세로 정렬 맞추기*/ display: flex; /*CSS3*/ align-items: center; /*Vertical align*/ justify-content: center; /*horizontal align*/ } button:hover에서 배경색 변하게 하고, button:hover a 에서 글자 색 변하게 한다. a:h..

table>thead>td*3^tbody>(tr>td*3)*2 *는 반복 ^는 상위에 병렬로 ()*는 묶어서 반복시키기

input의 width 100% 는 content영역만을 기준으로 함 실제로는 100% + 20px box-sizing : border-box; 주어야함.