코딩일기장 코딩일기장

[코딩애플] 고급모듈 -grid -grid-template-rows/columns를 통해 가로세로칸의 크기지정가능 .grid-container { //부모태그 display : grid; grid-template-columns : 100px 100px 100px; //칸 3개 grid-template-rows: 100px 100px; //줄 2개 div { border : 1px solid black; } } .grid-container { display : grid; grid-template-columns : 1fr 1fr 1fr; //칸 3개인데 1:1:1비율로 나눔(fr : frame 단위) grid-template-rows: 100px 100px; grid-gap : 10px; //grid사이의 ..

[코딩애플] 고급모듈 -비디오태그 사용법 -src : 비디오 경로 -controls : 재생버튼 등 -아래와 같이 source태그를 쓰면 웹브라우저와 호환성을 챙길 수 있음. //자동재생, 음소거(크롬은 autoplay속성을 쓰려면 muted도 같이 써줘야함) //위에꺼 안되면 밑에꺼 써주세요~ -preload 속성 preload="none" 미리다운X preload="auto" 미리다운O preload="metadata" 미리다운 적당히 -poster 속성 : 썸네일이미지 -loop 속성 : 무한반복 -audio 태그 사용법 -controls : 컨트롤버튼 -muted : 재생시 음소거 -preload 속성 preload="none" 미리다운X preload="auto" 미리다운O preload="me..

[코딩애플] 고급모듈 -Sass 1.css값을 변수에 저장 가능 2.값끼리 사칙연산가능(단위는 같아야함) $main-color : #2a4cb2; $기본사이즈 : 16px; //변수저장 .background { background-color: $main-color; font-size: $기본사이즈 - 2px; //사칙연산 } .box { color : $main-color; font-size : $기본사이즈 + 2px; } (참고1) SASS없이 그냥 CSS 파일에도 var() 이걸 이용해서 변수문법을 사용가능. (참고2) 그냥 CSS 파일에서도 calc() 라는 함수를 이용하면 사칙연산을 사용가능. -sass 파일과 scss 파일차이 : SASS 문법으로 코드짤 때 중괄호 생략이 가능 .box font..

[코딩애플] 중급모듈 -css 덮어쓰는 방법 3가지 1.같은 클래스명 하단에 쓰기 (다른파일 삽입후 같은 클래스명 작성후 다른 속성 부여) 2.우선순위 높이기 3.specificity 높이기 (~~안에 ~~를 선택. 구체적으로 선택하기) *맨처음 만들때 나중에 덮어쓰기를 위해 클래스명 하나만 쓰기 -좋은 코드 1.나중에 수정/관리가 쉬운 코드 2.확장성이 좋은 코드(재활용이 좋은 코드, 확장해서 다른것도 만들수 있는지)

[코딩애플] 중급모듈 -부트스트랩 사용 https://getbootstrap.kr/docs/5.3/getting-started/introduction/ Bootstrap 시작하기 Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요. getbootstrap.kr 1.html먼저 복사(css,js 두개 링크) 2.원하는 거 검색해서 복붙 3.새로운 css파일 만들어서 내 커스텀 디자인 입히기 or Utility Class 찾아서 class명에 넣기 -부트스트랩의로 반응형 레이아웃 만들기 https://getbootstrap.kr/docs/5.3/layout/grid/ 그리드 시스템 강력한 모바일 우선 flexbox 그리드를 사용하여 12개의..

[코딩애플] 중급모듈 -배경 그라데이션 넣는법 linear-gradient( direction, color1, color2, …, color3 ) 예시) .jbGrad01 { background: linear-gradient( to bottom, yellow, red ); } https://www.codingfactory.net/10838 CSS / linear-gradient - 선형 그라데이션 효과 만들기 linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, www.codingfa..

[코딩애플] HTML, CSS 기초모듈 -input을 타입에 따라 선택할 수 있음 input[type=text]{ // [type=타입명]을 하면 그 타입만 선택할 수 있음. padding : 10px; font-size: 10px; border : 1px solid black; border-radius: 5px; } -레이아웃을 짜기전 border-box를 지정해주는것이 좋음 div, input, textarea, button { box-sizing: border-box; } -가장 큰 컨테이너의 높이와 너비는 px, 안쪽의 박스는 편의를 위해 %로 하는 경우가 많음 -width : 100%를 사용해서 px단위의 미세조정을 없앨 수 있음. .background-container { background-..

[코딩애플] HTML,CSS 기초모듈 1.float를 썼을때 문제 => 그다음 박스의 margin을 주면 잘 안먹을 때가 있음 해결책 : 가상의 박스를 위에 추가하고 clear : both;속성을 준다 이름ㅎ 언제 //이런식으로 높이가 없는 가상의 박스를 만듦. 제목 내용 -시멘틱 태그 : 태그의 용도를 한번에 알아볼 수 있는 태그들 nav, section, footer 등 a:visited : 방문한적 있는 링크 선택 .navbar li a:visited { color:black; } background-imgae : url(); 이미지를 배경으로 넣는 속성 *linear-gradient(색이 점진적으로 변하는 그라데이션을 줄 수 있는 키워드) 예)background-image : linear-grad..