코딩을 배우는 직장인

안녕하세요! 오늘은 audio tag를 넣어서 웹페이지를 만드는 도중 background-color를 투명하게 만들려고 해도 되지 않아 구글링을 해서 알게 된 사실을 알려드릴려고 합니다. 결론은 불가능 하다입니다. 그럼 저희는 당연히 이런걸 바꾸기 위해서 javascript가 있는 것이고 어떻게 하면 바꿀 수 있을지 볼까요? 일단 간단히 codesandbox에서 해보도록 하겠습니다. 일단 이렇게 style에 background color로 transparent를 줘도 투명해지지 않습니다. 인터넷에서 찾아보니, audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { background-color: transparent..

일단 설치 npm i -D tailwindcss postcss autoprefixer 그리고 테일윈드 시작 npx tailwindcss init -p 그러면 2가지 파일이 만들어지는데 postcss랑 tailwind.config 이다 여기서 postcss는 건드릴 것이 딱히 없고 고수는 있겠지만 나같은 초짜는 없다 config.js를 열어보면 저기 content부분에 원래는 아무것도 없으나 강의를 보면서 따라적었다. 저 의미는 “./” 이 의미는 현재 폴더에서 라는 뜻이다 “./pages/” 이의미는 현재폴더에 pages라는 폴더의 의미이다. “./pages/**/” 이 의미는 현재폴더의 pages폴더 안에 모든 폴더를 얘기한다. “./pages/**/*” 이 의미는 위 의미의 폴더에 모든 파일을 얘기한..

이번에 노마드 코더 선생님의 강의를 듣는 도중 scss에 대해 배우게 되었습니다. 선생님의 말씀에 의하면 보통 현직에서 일하시는 분들은 css를 온전히 그대로 사용하는 분은 잘 없다고 하더라고요. scss를 사용하기 위해서는 모듈을 다운로드 받아 주어야 되고 생각보다 복잡했습니다.(오류가 너무 많이나서 결국 성공하였지만) 제가 설명하기에는 너무 부족한 부분이 많기 때문에 scss를 사용하는 방법은 인터넷에 많으니 한번 찾아보시면 좋겠습니다. 제가 복습을 할 겹 한번 설명을 해보겠습니다. scss는 정말 멋집니다. 예를 들어 이런 식의 코드가 있다고 했을 때 scss 에서는 h1:hover를 h1박스 안에 넣어주고 h1을 &로 바꾸어 주면 됩니다. 아래 코드를 봐주세요 이런 식으로 해주시면 되겠습니다. 그..

repeat() 함수를 사용해 크기가 같은 칼럼을 반복할 때 다음과 같이 칼럼의 개수를 지정하였습니다. grid-template-columns: repeat(3, ifr); 이때 숫자 대신에 auto-fit 이나 auto-fill을 사용한다면 화면 너비에 따라 칼럼 개수를 조절 할 수 있습니다. 예를 들어 다음과 같이 너비가 200px 인 칼럼을 화면 너비에 가득찰때까지 배치하는 것입니다. grid-templat-columns: repeat(auto-fix, 200px); 이런식으로 말이죠 그럼 auto-fill과 auto-fit의 차이점은 무엇일까요? 둘의 고통점은 칼럼개수를 자동으로 조절해 주므로 화면이 넓어지면 칼럼개수가 많아지고 반대로 화면이 좁아지면 칼럼 개수가 줄어듭니다. 두 값의 차이점은 남..

그리드 레이아웃을 설정하기 위해 display 속성값은 2가지가 있습니다. grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치합니다.(블록레벨요소에 대한 설명은 블로그에 적어두었습니다.) inline-grid: 컨테이너 안의 항목을 인라인 레벨 요소로 배치합니다. 여기서 칼럼과 줄을 지정하는 grid-template-columns와 grid-template-rows 속성을 사용합니다. 예를 들어 보겠습니다. 이런 식으로 display 속성값을 grid로 설정해주시오 columns값을 3개를 넣어 주었습니다. 그러면 세로 줄 3개가 생기고 아래 row값은 한개 넣어주시면 가로 줄이 하나 추가 될때마다 100px의 높이를 가진 가로줄을 만드는 것입니다. 여기서 상대적인 크기를 지정하는 fr 단위가 있는..

1. 뷰포트는 태그를 통해 태그 사이에 작성 content 안에서 사용하는 속성은 아래 와 같다. 종류 설명 사용 가능한 값 기본 값 width 뷰포트 너비 device-width 또는 크기 브라우저 기본 값 height 뷰포트 높이 device-height 또는 크기 브라우저 기본 값 user-scalable 확대, 축소 가능여부 yes 또는 no (yes는 1로, device-width와 device-height 값은 10으로 간주 yes initial-scale 초기 확대 축소 값 1~10 1 2. 뷰포트 단위 뷰포트 개념이 등장하면서 뷰포트 단위가 생겼는데 아래와 같다. - vw(viewport width): 1vw는 뷰포트 너비의 1%와 같음 - vh(viewport height): 1vh는 뷰..

1. animation에서 사용하는 속성들 @keyframes 애니메이션이 바뀌는 지점을 지정 animation-delay 애니메이션의 시작 시간을 지정 animation-direction 종료한 뒤 처음부터 시작할지 ,역방향으로 진행할지 지정합니다. animation-duration 실행시간을 지정 animation-interation-count 반복횟수를 지정 animation-name @keyframes로 설정해 놓은 중간 상태를 지원 animation-timing-function 키프레임의 전환 형태를 지정 animation animation속성을 한꺼번에 묶어서 지정합니다. 여기서 animation-duration 속성 값은 꼭 지정을 해주어야 합니다. 2. animation-direction ..

1. :link 방문하지 않은 링크에 스타일을 적용하는 선택자 2. :visited 방문한 링크에 스타일을 적용하는 선택자 3. :hover 마우스 포인터를 올려 놓으면 스타일을 적용하는 선택자 4. :active 웹 요소를 활성화 했을때 스타일을 적용하는 선택자. 예를 들어 웹요소의 링크를 클릭하는 순간의 스타일을 지정 가능하다 5. :focus 웹 요소에 초점이 맞추어 졌을때 스타일 적용. 예를 들어 텍스트 필드안에 마우스 포인터를 올려 놓거나, 웹문서에서 tab을 눌러 입력 커서를 이동했을 때 스타일을 지정.

이미지에 그라데이션을 넣는 속성 linear-gradient( to or , , ) 여기서 각도는 deg로 표기합니다. ex) background: #06f; /* css3를 지원하지 않는 브라우저용 */ background: linear-gradient(45deg, #06f, white 30%, #06f); /* 위에서부터 30% 위치에 색상 중지점 지정 */ 저기서 30%의 의미는 45도 방향으로 기울어 내려 가면서 30% 지점에 흰색그라데이션이 입혀지고 다시 blue 색깔로 변하게 되는 것입니다.

/ background-color : 배경 색을 넣음 / background-clip : 배경의 적용 범위 아래는 속성 값 border-box 박스 모델의 테두리 까지 적용 padding-box 테두리를 뺸 패딩까지만 적용 content-box 내용부분에만 적용 / background-image : url('이미지파일경로') 배경으로 이미지를 넣는 것 / background-repeat : 배경이미지의 반복 방법을 지정하는 속성 아래는 속성 값 repeat 화면이 가득찰때까지 가로 세로 반복, 기본값 repeat-x 가로로 반복 repeat-y 세로로 반복 no-repeat 한번만 표시, 반복x / background-position: 수평위치 수직위치 수평위치에 들어갈 수 있는 값 : left, cen..