기본 정보 📖 책 제목 : 최소한의 IT 언어 📖 가격 : 12,500원(전자책 기준) 📖 저자 : 비나이 트리베디 📖 발행일 : 2022년 12월 📖 쪽 수 : 320p 구입 시기 2023년 3월 13일 별점 ⭐⭐⭐⭐ 추천 대상 IT 업계의 a부터 z까지 알고 싶은 사람 스타트업을 준비하는 사람 나만의 사업 아이디어는 가지고 있는데 방법을 모르겠는 사람 밑바닥부터 애플리케이션을 직접 구축하고 싶은 사람 비개발자이지만 업무상 개발자와 소통할 일이 많은 사람 좋았던 점 1. 쉬운 설명 이 책은 주인공이 독자다. 무슨 말이냐구요? 당신은 '마이애폴리'라는 애플리케이션을 만들고자 합니다. 이에 한 애플리케이션을 만드는 단계를 점진적으로 쉬운 비유를 들어 비개발자가 읽어도 이해가 되게끔 설명되있습니다. 당신은 ..
플렉스 박스 레이아웃은 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 입니다. 1차원 방식이란, 가로(row) 혹은 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식을 말합니다. 플렉스 박스 레이아웃 구성요소 주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축을 의미 교차축(cross axis) : 주축과 수직한 축을 의미 플렉스 컨테이너 : display 속성값으로 flex나 inline-flex가 적용된 요소를 의미 플렉스 아이템 : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소를 의미 레이아웃 확인 방법 플렉스 박스 레이아웃의 기본 속성 display 속성 display: flex; / inline-flex; 👉 flex는 적용된 요소의 다음 요..
구글 폰트 적용하기 🔵 글꼴은 시스템에 기본으로 설치된 것도 많지만 실무에서는 시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 나눔 펜 스크립트 폰트 사용 하기 1. CSS 파일 내에서 폰트 파일 경로 지정 @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 2. font-family 속성 지정 body { font-family: 'Open Sans', sans-serif; } 아이콘 폰트 사용하기 🔵..
CSS 변환 효과는 요소를 회전, 이동, 크기, 기울기 조절 등의 변환을 적용하는 것을 의미합니다. transform 속성 2차원 좌표 이동하기 🔵transform: translate() 함수는 요소를 현재 위치에서 일정 거리만큼 이동하고 싶을 때 사용 합니다. translate(x, y) : x축과 y축을 동시에 이동 합니다. translateX() : x축으로 이동 합니다. translateY() : y축으로 이동 합니다. 2차원 확대 또는 축소하기 🔵transform: scale() 함수는 요소를 확대하거나 축소할 수 있습니다. transform: scaleX(n) : x축 방향으로 n배 확대 transform: scaleY(n) : y축 방향으로 n배 확대 transform: scale(n, n)..
애니메이션 속성은 전환 효과 속성과 함께 CSS3에서 새로 추가됐는데, 전환보다 더 정확하고 부드럽게 제어 가능합니다. 키 프레임 정의하기 애니메이션 키 프레임은 애니메이션 동작을 구성하는 단계들을 정의하는 것 입니다. 요소가 어떤 상태에서(from) 어떤 상태로 변하는지(to)를 정의 합니다. @keyframes 키프레임명 { from { } to { } } @keyframes 키프레임명 { 0% { } 50% { } 100% { } } animation-name 속성 animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정 합니다. animation-name: 키프레임명; animation-duration 속성 애니메이션 지속 시간 설정 animation-duration: 지속시간;..
전환? 요소(element)의 속성(property)이 변경될 때부드럽게변경되는 효과 제공 예) 요소의 배경색이 변경될 때 바로 변경되는 것이 아니라 일정 시간이 지나면 서서히 변경되는 효과를 줄 수 있습니다. 전환 효과가 없는 경우 뭔가 허전한 느낌. 전환 효과 적용한 경우 아까보다 부드러운 느낌 트랜지션과 속성 transition-property : 트랜지션의 대상 지정 transition-duration : 트랜지션을 실행할 시간 지정 transition-delay : 트랜지션의 지연 시간 지정 transition-timing-function : 트랜지션의 실행 형태 지정 transition : 속성 한꺼번에 지정 📌 전환 효과는 반드시 transition-property 속성과 transition..
1번 - 그림자 효과 위의 이미지를 CSS만 사용해서 아래의 이미지처럼 표시 하세요. 이미지 테두리에 1px짜리 회색(#ccc) 실선을 그립니다. border-radius 속성을 사용해서 사각형을 원형으로 변경 box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가 합니다. 내가 작성한 코드 2번 - 화면 배치 태그 안에 태그 4개와 태그 1개가 포함되어 있습니다. 해당 화면처럼 article 요소를 격자 형태로 배치 하세요. section의 폭은 800px article요소의 너비 350px, 높이 200px, 마진과패딩 10px article요소의 border 라인은 두께 1px, 색상은 (#ccc) 실선을 그립니다. 내가 작성한 코드 강아지 용품 준비하기 강아지 집 강아지가 편히 쉴 ..
⭐위치 속성으로 HTML 요소 배치 위치 속성은 요소를 상대적으로 또는 절대적으로 배치할 수 있습니다. postion 속성 👉 position은 요소의 위치를 지정하는 데 사용되는 속성 position 속성을 지정하면 top, right, bottom, left 속성을 이용하여 요소의 위치를 조정할 수 있습니다. 각 속성은 요소를 기준으로 지정된 거리만큼 이동시킵니다. position 속성과 함께 사용되는 속성으로 z-index가 있습니다. z-index는 요소의 쌓임 순서를 지정하는데 사용됩니다. 값이 높을 수록 위에 쌓이게 됩니다. position 속성은 레이아웃을 구성하는 데 매우 중요한 역할을 합니다. 특히 absolute와 fixed 값은 요소를 자유롭게 배치할 수 있도록 도와줍니다. 그러나 이..
문제 알파벳으로만 이루어진 단어를 입력받아, 그 길이를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 영어 소문자와 대문자로만 이루어진 단어가 주어진다. 단어의 길이는 최대 100이다. 출력 첫째 줄에 입력으로 주어진 단어의 길이를 출력한다. import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); String n = sc.nextLine(); System.out.println(n.length()); } }
앞서 배운 선택자를 제대로 활용하려면 선언부에서 사용할 수 있는 스타일 관련 속성과 속성에서 사용할 수 있는 속성값을 배워야 합니다. 적용 우선 순위 !important 인라인 스타일 규칙 id 규칙 class 규칙 요소 규칙 상속 부모 요소에 적용된 스타일을 자식 요소가 물려받는 것 inherit 단위 절대 단위와 상대 단위로 나누어 집니다. 절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위 (px) 상대 단위 : 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위(반응형) ⭐상대 단위 % 부모 요소의 속성값에 대한 상대적인 크기 .parent { font-size: 16px; } .child { font-size: 80%; } .child-to-child { font-siz..