프론트엔드 첫걸음

부트스트랩 중단점 중단점은 미디어 쿼리의 min-width역할을 한다. 각 중단점 별로 컨테이너 및 열 크기 및 동작을 제어할 수 있다. 예) PC에서는 4열 , 태블릿에서는 2열 ,모바일 1열 되도록 반응형 레이아웃을 짠다면? 안녕 안녕 안녕 안녕 - 반응형 레이아웃이 들어갈 container를 만들어준다. row는 하위 요소들을 12칸으로 쪼개질수 있도록 한다. - 부트스트랩으로 반응형 디자인 만들 때는 모바일 (작은 화면) 부터 만들면 쉽다. 내부 div 박스에 아무런 class 넣지않으면 어떤 사이즈에서나 1열로 보여진다. - 내부 div 박스에 미디어 쿼리를 대신하는 조건식을 넣어준다. col-md-6 : md (768px 이상) 에서는 12칸 중 6칸 차지하게 해라 => 태블릿 화면에서는 2열..

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ 1. 시작 스타일 만들기 이미지만 있는 css 작성 * { box-sizing: border-box; } .shop-bg { background-color: rgb(210, 210, 210); padding: 20px; } .shop-container { display: flex; justify-content: space-around; align-items: center; width: 80%; margin: auto; } .shop-item { width: 33%; max-width: 300px; padding: 20px; } .shop..

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..