hyunseok-j.log

HTML 기본

Wed, 28 Jul 2021 09:37:24 GMT

HTML 이란?

마크업 언어로 작성된 웹 브라우저 상에 표현될 content의 구조, 짜임을 정의한 문서를 말한다.

HTML 구성



  
    
    

    JS Bin

HTML 문서들을 기본적으로 위와 같은 형태를 가진다.

설 명

📌

코드의 처음 으로 현재 작성하는 문서(doc)가 HTML 타입 임을 선언해 알린다.

📌

사용자에게 보여지는 UI 요소가 아닌 현재 HTML 문서에 대한 *meta *정보 를 표기한다.

인코딩 utf-8, 적용할 style sheets, 적용할 scripts 와 탭에 표시되는 title 등을 정할 수 있다.

📌

사용자에게 보여지는 UI에 관련된 것을 표현하는 곳이다.

💎 용어 정리

메타 정보 외에는 보통 열린 tag, content, 닫힌 태그 의 구성으로 원하는 정보를 표현한다.

열린 tag 웹문서에 배치 영역을 구분하는 역할을 하거나 뒤에 나오는 Content가 링크 와 같은 어떤 기능을 부여하는 역할을 하는 것을 의미한다. 처럼 형태로 태그 이름을 <> 안에 표기하면 된다.
📣 속성 (attribute)

기존 정의된 tag 에 detail 한 설정이 가능토록 해주는 것을 의미한다.
- tag 의 스타일을 변경 (font 사이즈, 컬러, image 폭, 높이)
- 특정 id 를 부여해 독립적으로 처리 가능하게 분리
- 공통 속성 부여를 위해 class 단위 처리 등

Content
웹문서에 표현하고 싶은 text 정보를 의미한다.
열린 tag에 의해 tag 정의로 style 이 변경되거나 문서상 배치 영역 구분(sectioning)이 될 수 있다.

닫힌 tag 상응되는 열린 tag가 적용되는 곳의 마지막을 의미한다.

 
 My Content 


 My Content

주요 Tag

tag 는 2가지 기준으로 분류가 가능하다.

Box 와 Item
Box 태그 CSS없이 사용자에게 보이지 않으면서 다른 특별한 기능없이 Tag 로 둘러싸인 Content 가 웹페이지의 어느 곳에 위치하는지 영역 구분 역할 수행
** Item 태그** 사용자에게 보이면서 링크나 플레이어 같은 태그별 기능을 수행

Block 과 Inline
Block Level 부모 Tag를 기준으로 가로 한 줄을 전부 차지 하는 Tag Inline Level 부모 Tag를 기준으로 다음에 올 Tag가 부모 Tag의 가로 길이를 넘지 않는다면 가로 한 줄을 공유 하는 Tag

Semantic Tag 란?

Tag 의 이름만으로 그 Tag 의 역할, 대략적인 위치 등의 의미를 전달하는 Tag를 뜻한다.

왜 Semantic Tag 를 사용해야 할까?

non-semantic tag 인

와 으로만 이루어진 HTML 파일이 있다고 생각해보자.
그 HTML 파일을 수정하기 위해 열었을 때,

나

처럼 웹페이지 상의 위치와 기능을 알려주는 tag가 없기 때문에 직접 하나하나 각 코드가 의미하는 바를 확인 해봐야 하는 문제가 생긴다.
물론, class를 통해 같은 의미와 기능을 하는 tag 들을 표현할 수 있지만 매번 새로운 페이지를 작성할 때마다 반복되는 의미와 기능 표현하기 위해 class를 정의하며 불필요한 시간이 소모된다. 따라서, 다시 한 번 재차 구현할 필요없이 semantic tag를 사용해 가독성과 생산성을 둘 다 잡으면 된다.

Semantic tag 로 표현하는 웹페이지 Layout

유용한 사이트 모음

MDN 의 html element reference Tag 와 Attribute 정리된 곳으로 자신이 필요로 하는 기능을 만족하는 Tag 또는 Attribute가 있는지 확인하고 지원 가능 브라우저 종류와 버전을 확인할 수 있다.

Validator 정상적으로 입력되지 않은 html 문서인지 확인할 수 있다.

참고

드림코딩 엘리 Youtube 중 HTML 관련 영상

함수

Tue, 06 Jul 2021 08:52:17 GMT

함수

📌 함수 정의

아래의 형태로 함수를 정의한다.

⁉️ 반환값이 없을 때, 반환타입으로 `Void`를 넣거나 `-> 반환타입` 부분을 생략

func 함수이름 (param1Name: param1Type, param2Name: param2Type) -> 반환타입 {
    /* 구현부 */
    return 반환값
}

📌 함수 호출

 /* 1. 매개변수 이름과 값을 넣어 호출 */
 callFunction(a: 10, b: 20)

/* 2. 전달인자 레이블과 값을 넣어 호출 */
// func callFunction(left a: Int, right b: Int) -> Int {}
callFunction(left: 10, right: 20)

/* 3. 전달인자 레이블이 '_'여서 값만 넣어 호출 */
// func callFunction(_ a: Int,_ b: Int) -> Int {}
callFunction(10, 20)

📌 함수 타입 표현

함수도 하나의 객체로 변수나 상수에 하나의 타입으로 지정해서 저장 가능

func sum (a: Int, b: Int) -> Int {
    return a+b
}
var varFunction: (Int, Int) -> Int = sum(a:b:)

📌 매개변수 Default 값 설정

func 함수이름(param1Name: param1Type = defaultValue) {}

📌 전달인자 레이블 (Argument Label)

매개변수의 별명으로, 매개변수의 의미를 더 명확히 해야할 경우에 사용

⁉️ 전달인자 부분에 `_`를 사용하면, 함수 호출시에 매개변수이름없이 호출 가능

func 함수이름(전달인자 param1Name: param1Type) {}

📌 가변 매개 변수

함수당 1개인 맨 마지막 매개변수 타입 뒤에 띄어쓰기 없이 '...'로 표현

⁉️ 함수 body에서 가변 매개 변수로 넘어온 인자는 `Array` 타입으로 전달

func getStringNames(friends: String...) -> String {
    return "\(friends)"
}

getStringName() // 결과 : []

🧷 참고한 강의 : "iOS 프로그래밍을 위한 스위프트 기초"

데이터 타입

Fri, 18 Jun 2021 11:11:37 GMT

기본형

📌 Bool

참은 true 으로, 거짓은 false로 표현

📌 정수 Int, UInt

실행 환경에 따라 값의 범위 변경

64비트 환경이면 Int는 Int64로 설정되어 64비트(8bytes) 정수형 타입

UInt 는 양수만 할당 가능

📌 부동소수 Float, Double

Float 는 32비트 부동소수형이고, Double 은 64비트 부동소수형이다.

📌 문자 관련 Character, String

둘 다 유니코드 를 사용하며, 큰 따옴표(" ") 를 사용

Any, AnyObject, nil

📌 Any

함수 타입을 제외한 클래스 포함 Swift의 모든 타입 을 지칭하는 키워드

is로 어떤 타입을 가지고 있는지 확인 후, as 로 형변환하여 사용 가능

class Human {
  var weight: Double
  var tall: Double

  init(_ weight: Double, _ tall: Double){
      self.weight = weight
      self.tall = tall
  }

}

var any: Any = Human(13,12)

if any is Human { if let instance: Human = any as? Human { print("tall = (instance)") } }

### 📌 AnyObject
모든 클래스를 지칭하는 프로토콜
### 📌 nil
`null` 과 같이 `없음` 을 의미하는 키워드
* `Optional` 타입의 변수나 상수에만 할당이 가능




***




## 컬렉션
### 📌 Array
순서(인덱스)가 있는 리스트 컬렉션
#### 1. Array 생성
`[Int]`가 `Array`와 동일하게 사용
```swift
var integers: Array = Array()
// var integers: [Int] = Array()
// var integers: Array = [Int]()
// var integers: [Int] = [Int]()
// var integers: [Int] = []

2. 값 추가

integers.append(10)

3. 값 제거

integers.remove(at: 0)
integers.removeLast()
integers.removeAll()

4. 인덱스 i 의 값 조회

integers[i]

5. Array 길이

integers.count

📌 Dictionary

key와 value로 구성된 컬렉션

1. Dictionary 생성

[String: Any]가 Dictionary와 동일하게 사용

var anyDict: Dictionary = Dictionary()
// var anyDict: [String: Any] = [String: Any]()

2. 값 추가

anyDict["someKey"] = "value"

3. 값 제거

anyDict.removeKey(forKey: "someKey")
anyDict["someKey"] = nil

📌 Set

순서가 없고 중복된 값이 없는 컬렉션

1. Set 생성

var integerSet: Set = Set()

2. 값 추가

integerSet.insert(10)

3. 값 제거

integerSet.remove(value)
integerSet.removeFirst()

4. Set 길이

integerSet.count

5. 집합 관련 함수

합집합 setA.union(setB)
교집합 setA.intersection(setB)
차집합 setA.substracting(setB)

🧷 참고한 강의 : "iOS 프로그래밍을 위한 스위프트 기초"

변수와 상수

Wed, 16 Jun 2021 12:14:58 GMT

변수

데이터를 저장한 후에도 값 변경이 가능한 메모리 공간을 의미

📌 var

선언할 때, 선언하는 것이 변수임을 지칭하는 키워드

📌 변수 선언

var 변수이름: 변수타입 = 저장할 값

상수

데이터를 한 번 저장한 후, 불변인 메모리 공간

📌 let

선언할 때, 선언하는 것이 상수임을 지칭하는 키워드

📌 상수 선언

let 상수이름: 상수타입 = 저장할 값

✔️ let 선언 시에 let 이름: 타입 까지만 적어두고 나중에 할당도 가능

🧷 참고한 강의 : "iOS 프로그래밍을 위한 스위프트 기초"

명명법 / 문자열 보간법

Wed, 16 Jun 2021 11:45:52 GMT

명명법

기본적으로 대소문자가 구분된 Camel 형태로 작성

✔️ Camel

변수나 함수명 등을 표현할 때 단어마다 첫문자는 대문자로 표현하되, 첫번째 단어의 첫문자는 소문자로 시작하게 표기하는 방식

[ex] somePeople, getStudentNames()

콘솔 출력

📌 print

단순 문자열 출력

📌 dump

인스턴스의 구체적인 사항까지 출력해서 확인하기 위해 사용

문자열 보간법

기본 문자열과 변수 or 상수와 같은 값을 같이 출력하기 위해 사용

var age: Int = 22

print("안녕하세요 저의 나이는 \(age + 5)입니다.")

🧷 참고한 강의 : "iOS 프로그래밍을 위한 스위프트 기초"