본문 바로가기

분류 전체보기564

[CSS] text-align 종류 설명 start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. left 왼쪽에 맞추어 문단을 정렬한다. right 오른쪽에 맞추어 문단을 정렬한다. center 가운데에 맞추어 문단을 정렬한다. justify 양쪽에 맞추어 문단을 정렬한다. match-parent 부모 요소에 따라 문단을 정렬한다. https://webstoryboy.co.kr/1677 2023. 5. 6.
[CSS] Color color: 1. 16진수로 표현하는 방법 6자리의 16진수는 앞에서부터 두 자리씩 묶어서 #RRGGBB로 표시한다. 여기서 RR자리에는 빨간색, GG자리에는 초록색, BB자리에는 파란색의 양을 표시한다. 16진수는 외운다기 보다는 이전에 설정했던 색상이 무슨색인지 파악하고 그 색상을 다른 곳에 적용하는 과정에서 복사 붙여넣기 하면서 많이 쓰인다. color: #FF0000 2. hsl과 hsla로 표현하는 방법 hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다. (a는 alpha로 불투명도를 줄 수 있는 값이다.) color: hsl(0, 100%, 50%) color: hsla(0, 100,%, 50%, 0.5) 3. 영문으로 표현하는 방법 해당 방법은 영문으.. 2023. 5. 6.
[CSS] font-size 1. px vs rem 아래의 사진은 아래의 코드로 웹 페이지를 폰트 사이즈를 설정하고 웹 사이트의 폰트 사이즈를 변경했을 때 나타난 결과이다. [해당 사진의 결론] px는 폰트 사이즈가 고정되어 있지만 rem은 사용자의 설정에 따라서 폰트사이즈가 변경된다. px rem [rem과 폰트 사이즈의 관계] 1. 글꼴 크기: 아주 작게 - 1 rem = 9px - 2 rem = 18px - 3 rem = 27px 2. 글꼴 크기: 작게 - 1 rem = 12px - 2 rem = 24px - 3 rem = 36px 3. 글꼴 크기: 중간 - 1 rem = 16px - 2 rem = 32px - 3 rem = 48px 4. 글꼴 크기: 크게 - 1 rem = 20px - 2 rem = 40px - 3 rem =.. 2023. 5. 6.
[HTML] 시맨틱 태그와 div, span 1. 시맨틱 태그란? : 시맨틱 태그란 그 이름만 봐도 의미를 알 수 있는 태그를 의미한다. 왜 시맨틱 태그를 사용하는가❓ 1. 웹 브라우저가 HTML 소스코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있다. 2. 문서 구조가 정확히 나누어지므로 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽다. 3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 헤더(header) 사이트 로고, 제목, 검색창, 사이트 메뉴를 삽입한다. 네비게이션(nav) 사이트의 메뉴들이 위치 nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 안에 포함할 수 있고 독립해서 사용할 수도 있다. 메인(main) 사이트의 본문 내용 위치 메뉴, 사이드바, 로.. 2023. 5. 4.
[HTML] 자주 사용되는 HTML 태그정리2 - 표, 멀티미디어 1. 표 관련 태그 table: 표를 나타낸다 caption: 표의 제목을 넣는다. tr: 표의 행을 만든다. td: 표의 셀을 만든다. th: 제목 셀을 만든다. thead: 표 구조에서 제목 부분을 나타낸다. tbody: 표 구조에서 내용 부분을 나타낸다. tfoot: 표 구조에서 요약이나 정리 부분을 나타낸다. col: 표에서 열의 스타일을 지정한다. colgroup: 표에서 여러 열을 함께 묶어서 스타일을 지정한다. rowspan: 표에서 셀들을 행으로 합친다. colspan: 표에서 셀들을 열로 합친다. 셀의 내용 셀의 내용 코드 구조화 표 제목 /* 표의 제목 부분 */ /* 표의 행을 만든다. * 제목1 /* 제목 셀을 만든다. * 제목2 제목3 제목4 /* 표의 내용 부분 * 내용1.1 /.. 2023. 5. 4.
[HTML] 자주 사용되는 HTML 태그정리1 - 텍스트, 목록 1. hn 태그 주로 제목에 사용된다. ~까지 사용할 수 있으며 숫자가 커질 수록 글자 크기는 작아진다. 2. p 태그 테스트 단락, 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다. 3. br 태그 줄 바꾸는데 사용한다. 텍스트 단란 중 원하는 위치에서 줄을 바꾼다. [p태그와 br태그의 차이점] p태그는 단락을 나누면서 줄바꿈을 해주는 태그이고 br태그는 단순한 줄바꿈을 해주는 태그이다. 4. strong, b 태그 strong: 텍스트를 굵게 표시 + 강조의미 O b: 텍스트를 굵게 표시 + 강조의미 X 5. em, i 태그 em: 텍스트를 기울여서 표시 + 강조의미 O i: 텍스트를 기울여서 표시 + 강조의미 X 화면 낭독기에서 em은 강조해서 읽어준다. 6. sup, sub su.. 2023. 5. 4.
[CSS] 구조 가상 클래스 1. 특정 위치에 자식 요소 선택하기 :only-child 부모 안에 자식 요소가 하나뿐 일때 자식 요소를 선택한다. A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택한다. :first-child 부모 안에 있는 모든 요소 중에 첫 번째 자식 요소를 선택한다. :last-child 부모 안에 있는 모든 요소 중에 마지막 번째 자식 요소를 선택한다. A:first-of-type 부모 안에 있는 A 요소 중에서 첫 번째 자식 요소를 선택한다. A:last-of-type 부모 안에 있는 A 요소 중에서 마지막 번째 자식 요소를 선택한다. :nth-child(n) 부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택한다. :nth-last-child(n) 부모 안에 있는 모든 요소 중에서.. 2023. 5. 3.
[CSS] 속성 선택자 ❗️ {... }❗️ 1. 특정 속성이 있는 요소를 선택하는 [속성] 선택자 :속성값에 따라 원하는 요소를 선택하여 스타일을 지정할 때 사용 ❗️ a[속성]{... }❗️ 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 2. 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자 : 주어진 속성값이 일치하는 요소를 찾아서 스타일을 지정할 때 사용 HTML CSS Selector Level 3 미디어쿼리 3. 여러 값중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자 :여러 속성값 중에서 해당 속성값이 포함된 요소를 선택하여 스타일을 지정한다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 4. 특정 속성값이 포함된 속성 요소를 선택하는 [속성 | 값] 선택자 : 특정 속성값이 포함된 속.. 2023. 5. 3.
[CSS] 연결 선택자 1. 하위(자손) 선택자 : 부모 요소에 포함된 하위 요소를 모두 선택한다. 즉, 자식요소뿐만 아니라 손자 요소, 손자의 손자 요소등 모든 하위 요소까지 적용된다. ❗️A B{ ...}❗️ HTML CSS JavaScript HTML CSS HTML2 CSS2 JavaScript ❗️{ ... }❗️ 3. 인접 형제 선택자 ❗️A+B{ ... }❗️ 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일 4. 형제 선택자 ❗️A~B{ ... }❗️ 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx).. 2023. 5. 3.
[CSS] 가상 클래스 선택자 가상 클래스 선택자 : 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있다. [사용자 동작에 반응하는 가상 클래스] 1. 방문하지 않은 링크에 스타일을 적용하는 link 2. 방문한 링크에 스타일을 적용하는 visited 3. 특정 요소에 마우스 포인터를 올려 놓으면 스타일을 적용하는 hover 4. 웹 요소를 활성화했을 때 스타일을 적용하는 active 5. 웹 요소에 초점을 맞추었을 때 스타입을 적용하는 focus 방문함 방문안함 [요소 상태에 따른 가상 클래스] 1. target : 같은 문서안에서 다른 위치로 이동할 때는 앵커를 이용한다. 이때 target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다. 2... 2023. 5. 1.
[CSS]기본 선택자 1. 전체 선택자 : 문서의 모든 요소에 스타일을 적용한다 ❗️*{ ... }❗️ HTML CSS JavaScript 2. 태그(타입) 선택자 : 특정한 태그(타입)를 사용한 모든 요소에서 스타일을 적용한다. ❗️태그{ ... }❗️ HTML CSS JavaScript 3. 아이디 선택자 : 특정 부분만 선택해서 문서 안에서 한 번만 적용된다. ❗️#아이디{ ... }❗️ HTML CSS JavaScript 4. 클래스 선택자 : 특정 부분만 선택해서 문서안에 여러 번 적용한다. : id 선택자를 여러개 사용한 것과 같은 결과지만 클래스 선택자는 id 대신 class, # 대신 .을 사용한다. ❗️.클래스명{ ... }❗️ HTML CSS JavaScript 5. 그룹 선택자 ❗️A, B{ ... }❗️.. 2023. 4. 30.
[JavaScript] 행변환 prompt로 입력 받은 값은 문자형이다. 그렇기 때문에 숫자를 입력 받아도 90이 아닌 "90"이 된다. const mathScore = prompt("수학은 몇점인가요?"); // "90" const engScore = prompt("영어는 몇점인가요?"); // "60" const result = (mathScore + engScore) / 2; // "90" + "60" = "9060", "9060" / 2 = 4530 console.log(result); 여기서 "9060" / 2가 연산이 되었던 이유는 자동 행변환 덕분이다. 오류를 발생시킬 수 있기 때문에 자동으로 시스템에서 형변환을 시킨겄이다. 행변환은 아래의 3가지가 있다. 1. String() 괄호 안의 타입을 문자열로 변경해준다. 2... 2023. 4. 20.
[JavaScript] alert, prompt, confirm 1. alert alert: 알려줌 (사용자와 상호작용보다는 통보느낌) 2. prompt prompt: 입력을 받음 (사용자에게 어떤 값을 입력받아 값을 사용함.) const name = prompt("이름을 입력하세요."); alert("반갑습니다. " + name + "님!"); prompt는 아래와 같이 인수를 두개 입력해주면 기본 값을 미리 입력해 놓을 수도 있다. const name = prompt("이름을 입력하세요.", "홍길동"); alert("반갑습니다. " + name + "님!"); 3. confirm confirm: 확인을 받음 해당 confirm에 대한 답변은 boolean값으로 받을 수 있다. const isNice = confirm("반가우신가요??"); if (isNice =.. 2023. 4. 10.
[JavaScript] 자료형 https://www.youtube.com/watch?v=KF6t61yuPCY 1. 문자형 String 문자형은 아래와 같이 3가지 방식으로 작성할 수 있다. const name1 = "Mike"; const name2 = 'Mike'; const name3 = `Mike`; 만약 기호로 작은 따옴표(')를 사용하려면 큰 따옴표(")를 사용하던가 슬래쉬(\)와 함께 사용해야한다. const message1 = "I'm a boy."; const message2 = "I\'m a boy."; 2. 변하는 String 값 출력 선언한 상수 값을 String 값에 넣어서 출력하기 위해서는 `와 ${}를 사용해야한다. const name = "Mike"; const age = 30 const message1 =.. 2023. 4. 8.
[JavaScript] 변수 1. 변수 선언 아래와 같이 변수를 선언할 수 있다. 변수를 선언할 때는 ;를 마지막에 사용해주어야한다. name = "Mike"; age = 30; 2. 변수에 접근 alert() //경고창을 띄우는 함수 console.log //로그를 띄우는 함수 위의 사진과 같이 사용할 수 있다. ⚠️ 하지만 여러 사용자가 협업할 때 위와 같이 변수를 사용하는 것은 위험할 수 있다. 마지막에 선언된 변수의 값으로 적용될 수 있기 때문이다. ⚠️ 따라서 아래의 키워드를 사용해 해당 부분을 방지할 수 있다. 3. let, const let: 선언 후 다른 값으로 변경 가능한 값 const: 선언 후 다른 값으로 변경 불가능한 값 (상수라는 것을 알리기 위해서 대문자로 변수명을 작성하는 것이 좋다.) 4. 변수와 관련된.. 2023. 4. 8.
개발일지 71일차 (10/16) - SNS 타입 프로젝트 QC 진행 보호되어 있는 글 입니다. 2022. 10. 19.
개발일지 70일차 (10/13) - SNS 타입 프로젝트 QC 진행 보호되어 있는 글 입니다. 2022. 10. 13.
개발일지 69일차 (10/07) - 재설치 팝업 보호되어 있는 글 입니다. 2022. 10. 7.
개발일지 68일차 (10/06) - SNS타입 알림 설정 보호되어 있는 글 입니다. 2022. 10. 7.
개발일지 67일차 (10/04) - 최근 접속시간 갱신 오류 수정 보호되어 있는 글 입니다. 2022. 10. 4.
개발일지 66일차 (09/26) - QC 304수정 보호되어 있는 글 입니다. 2022. 9. 26.
UINavigationController 보호되어 있는 글 입니다. 2022. 9. 26.
named Color 추가하기 (블로그 주소) https://medium.com/@bhavneetsingh08/apples-new-xcode-feature-named-color-371f59c37137 2022. 9. 24.
PreView(Ver: Xcode14) 1. PreView관련 용어 📌 PinControl 📌 📖 PageControls 📖 ✍🏼 Canvas Controls ✍🏼 (왼쪽부터) - Live: 실시간으로 동작(버튼, 스크롤 등등 작동함) - Seclectable: 실시간으로 동작하지 않음(버튼, 스크롤 등등 작동하지 않음) - Variants - Color Sceheme Variants: Light모드와 Dark모드를 비교해서 보여줌. - Orientation Variants: 세로모드, 가로모드(좌측으로), 가로모드(우측으로)된 화면을 비교해서 보여줌 - Dynamic Type Variants: 지정된 12가지 사이즈에 따른 다양한 UI를 비교해서 보여줌 - Device Settings: 하나의 PreView에서 다크모드로 할건지 안 할건지,.. 2022. 9. 24.
GeometryReader 참고 블로그 - GeometryReader는 무엇일까? 1. 정의 💡 GeometryReader는 그 자체로 ‘View’이며, container 안 View 스스로의 크기와 위치를 함수 정의를 봐도 무슨말인지 모르겠다. 따라서 참고 블로그에서 이해한 내용을 요약해보겠다. View를 구성할 때는 HStack, VStack, ZStack을 적절히 사용해서 만들 수 있다. 때때로 하위뷰들의 위치나 크기(모양)을 직접 조작해야하는 경우가 생긴다. 이때 사용하는 것이 GeometryReader이다. 하위뷰의 별다른 설정이 없다면 상위뷰가 제안해준 곳에 위치한다. 2. GeometryReader 사용해보기 [왼쪽 사진] Text는 특별한 수식어가 없기 때문에 가장 상단에 위치하고 남은 공간을 RightView가 채.. 2022. 9. 23.
개발일지 65일차 (09/21) - Guideline 5.1.1 블루투스 팝업 메시지 수정 보호되어 있는 글 입니다. 2022. 9. 21.
왜 @IBOutlet에 didSet으로 설정을 몰아 놓는가? 보호되어 있는 글 입니다. 2022. 9. 20.
List 1. 정의 💡 List는 하나의 열에 여러개의 행으로 표현되는 UI를 구성해 다중 데이터를 쉽게 나열할 수 있도록 구성된 View이다. 2. 사용예시 아래의 예시처럼 Stack처럼 UI를 감싸주면된다. 3. 동적 컨텐츠 [1. Range] List(0.. 2022. 9. 20.
NavigationLink 1. 정의 💡 지정한 목적지로 이동할 수 있도록 만들어진 버튼으로, 뷰를 눌렀을 때 또는 미리 지정된 특정 조건을 만족했을 때 화면전환 2. 사용예시 NavigationLink(destination: ) { 화면전환이 되도록 만드는 버튼의 UI } 2022. 9. 20.
NavigationView 1. 사용법 💡 사용법은 Stack을 사용하는 것처럼 감싸주기만 하면된다. 2. NavigationBarTitle NavigationBarTitle 수식어로 제목을 표현할 수 있다. NavtigationBarTitle은 기본적으로 automatic모드로 설정되어있지만 large, inline모드로 설정이 가능하다. 3. NavigationBarItems BarItem은 NavigationView 내부에서 만드는게 아니라 외부에서 만들어서 navigationBarItems(leading: ,trailing: )을 사용해서 적용해준다. 만약 여러개의 item을 넣고 싶다면?? -> HStack을 사용하자. 4. hidden 수식어 navigationBarHidden - 네비게이션 바 숨김 navigation.. 2022. 9. 20.

티스토리툴바